Kun rakennetaan käyttöliittymiä verkkosovelluksiin, kohdataan usein tilanteita kuten "Näytä lista kohteista, jos se on saatavilla, tai näytä paikkamerkki, jos lista on tyhjä." Angularissa tällaiset tehtävät hoidetaan rakenteellisilla direktiiveillä — tehokkailla työkaluilla, jotka hallitsevat, mitä mallissa näytetään ja milloin.

Toisin kuin tavalliset HTML-attribuutit, rakenteelliset direktiivit eivät pelkästään säädä elementin käyttäytymistä — ne muuttavat koko DOM-rakennetta lisäämällä tai poistamalla kokonaisia elementtejä.

Rakenteellinen direktiivi NgFor

Oletetaan, että käytössä on tehtävälista TaskListComponent-komponentissa. Jokainen tehtävä tulee esittää omilla käyttöliittymäelementeillään: poistopainike, tilan vaihtopainike jne. Jokaisen tehtävän kirjoittaminen erikseen HTML:ään olisi tehotonta ja vaikeasti ylläpidettävää, kun data muuttuu.

tasks = [
  { id: 1, title: 'Buy groceries', completed: false },
  { id: 2, title: 'Walk the dog', completed: true },
  { id: 3, title: 'Learn Angular', completed: false }
];

Angular tarjoaa *ngFor-direktiivin, jonka avulla voidaan käydä läpi taulukko ja luoda automaattisesti HTML-elementti jokaiselle alkioille.

<task-component *ngFor="let task of tasks"></task-component>

Tässä *ngFor="let task of tasks" kertoo Angularille: "Jokaiselle tasks-taulukon task-alkiolle luodaan yksi <task-component>". Jos taulukossa on 3 tehtävää, Angular renderöi kolme erillistä task-component-instanssia, joilla jokaisella on oma datansa. Tämä tekee käyttöliittymästä skaalautuvamman ja poistaa toistuvan koodin tarpeen.

ngFor:n lisäominaisuudet

Perusiteroinnin lisäksi *ngFor tukee useita hyödyllisiä kontekstimuuttujia, joihin pääsee suoraan käsiksi direktiivissä käyttämällä let-avainsanaa.

Tässä pikaopas:

Tässä esimerkki, jossa käytetään joitakin näistä:

<task-component
  *ngFor="let task of tasks; let i = index; let odd = odd"
  [task]="task"
  [class.odd]="odd">
</task-component>

Tässä esimerkissä odd-muuttujaa käytetään CSS-luokan lisäämiseen joka toiselle riville, mikä helpottaa listan visuaalista hahmottamista.

Rakenneohjain NgIf

Tarkastellaan, miten ehdollinen renderöinti toimii yksinkertaisen tehtävälistan avulla. Haluat näyttää listan, jos siinä on tehtäviä, ja jos se on tyhjä, näyttää viestin kuten "Ei tehtäviä vielä".

Angularissa käytetään *ngIf-ohjainta elementtien näyttämiseen tai piilottamiseen ehdollisesti. Vaikka se näyttää tavalliselta HTML-attribuutilta, se tekee taustalla paljon enemmän.

<div *ngIf="tasks.length > 0">Task List</div>

Kun Angular käsittelee *ngIf-rakennetta, se muokkaa mallia taustalla. Elementtiä ei renderöidä suoraan, vaan se kääritään <ng-template>-elementin sisään ja lisätään DOMiin vain, jos ehto on true.

<ng-template [ngIf]="tasks.length > 0">
  <div>Task List</div>
</ng-template>

Jos ehto arvioituu false-arvoksi (eli tasks.length === 0), Angular ei renderöi elementtiä lainkaan — se puuttuu kokonaan DOMista.

Mutta entä jos haluat näyttää varaviestinäytön pelkän sisällön piilottamisen sijaan? Tässä kohtaa else-rakenteen *ngIf-ehto on hyödyllinen. Sen avulla voit viitata vaihtoehtoiseen malliin käyttämällä <ng-template>-elementtiä, jolla on oma tunniste.

Näin tapahtuu:

• Angular tarkistaa ensin, sisältääkö tasks-taulukko alkioita;

• Jos sisältää, se renderöi <div>-elementin tehtäväkomponentteineen;

• Jos taulukko on tyhjä, käytetään #noTasks-mallia ja näytetään viesti: "No tasks yet 😊".

Tämä tekee malleista selkeämpiä ja auttaa hallitsemaan tyhjiä tiloja käyttäjäystävällisesti.