Directive Built-in ngFor

NgFor berguna untuk melakukan iterasi dari sebuah array atau object.

Contoh skenario, akan ditampilkan list user.

Buka file server.component.html, lalu tambahkan code berikut

<ul>
    <li *ngFor="let user of users">{{ user}}</li>
</ul>

Perhatikan, ngFor menggunakan tanda asterisk (*).

Code diatas menunjukan looping array users (property yang kita definisikan pada file server.component.ts), taruh nilainya dalam temporary variable user.

Kemudian value dari variable user akan ditampilkan sebagai inner text dari list.

Berikut isi lengkap file server.component.html

<p [ngStyle]="{backgroundColor: getColor()}"
    [ngClass]="{online: serverStat==='online'}"
>
    Server: {{serverId}} status: {{getServerStat()}}
</p>

<!-- demo ngfor-->
<ul>
    <li *ngFor="let user of users">{{ user}}</li>
</ul>
<!-- end demo ngfor-->

<p>{{serverCreationStat}}</p>
<hr>
<label>Server Name</label>
<!-- <input type="text" class="form-control" (input)="onUpdateNameServer($event)"> -->
<input type="text" class="form-control" [(ngModel)]="serverName">
<button class="btn btn-primary" [disabled]="!allowNewServer" (click)="onServerCreate()">Add Server</button>
<!--tambahkan code ini untuk membandingkan ngIf-->
<p>Server create with name: {{serverName}}</p>
<p *ngIf="serverCreated; else noServer">Server create with name: {{serverName}}</p>
<ng-template #noServer>
    <p>No server created</p>
</ng-template>

Selanjutnua buka file server.component.ts, kemudian tambahkan array users.

import { Component} from "@angular/core";

@Component({
    selector: 'app-server',
    templateUrl: './server.component.html',
    //styleUrls: ['./server.component.css']
    //demo ngClass
    styles: [`.online {font-weight: bold;}`]
})
export class ServerComponent {
    serverId: number = 1;
    serverStat: string = 'online';
    allowNewServer: boolean = false;
    serverCreationStat: string = 'No server created...';
    serverName: string = 'anonymous';
    serverCreated: boolean = false;
    //demo ngFor
    users= ['userA', 'userB'];

    constructor(){
        setTimeout(()=>{this.allowNewServer = true;}, 2000);
        //ditambahkan untuk kebutuhan demo directive ngStyle
        this.serverStat = Math.random()>0.5 ? 'online' : 'offline';
    }

    getServerStat(){
        return this.serverStat;
    }

    onServerCreate(){
        this.serverCreationStat = this.serverName + ' Server created...';
        this.serverCreated  = true;
    }

    //digunakan oleh directive ngStyle
    getColor(){
        return this.serverStat === 'online' ? '#83e7b4' : '#e78383';
    }

    //event binding with data
    // onUpdateNameServer(event : Event){
    //     this.serverName = (<HTMLInputElement>event.target).value
    // }
 }

Sesuai ekspektasi, list dari user akan ditampilkan.

Tips

Anda juga bisa membuat local variable untuk value yang sudah disedikan: index, first, last, even dan odd.

index akan mengembalikan index dari loop saat ini, sementara untuk first, last, even dan odd akan mengembalikan nilai boolean, true atau false sesuai kondisi loop saat itu.

Menggunakan contoh ngFor diatas, kita tambahkan variable index dan odd.

<ul>
    <li *ngFor="let user of users; let i = index; let odd = odd"
        [class.odd]="odd">
        {{i}}. {{ user}}
    </li>
</ul>

Akan mengembalikan list seperti berikut:

<ul>
  <li>0. UserA</li>
  <li class="odd">1. UserB</li>
</ul>

Perhatikan

• index mulai dari 0.
• Value dari odd (ganjil) berdasarkan index, jika index=1, maka nilai odd adalah true.