Directive Built-in ngIf

Directive ngIf berfungsi seperti if block. Memerlukan nilai true agar directive dijalankan.

Sebagai contoh, buka file server.component.html, lalu tambahkan code dibawah.

Perhatikan penulisan adalah *ngIf, tanda astersk (*) menunjukan structural directive, dimana akan mengubah struktur DOM.

<p>Server: {{serverId}} status: {{getServerStat()}}</p>
<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">Server create with name: {{serverName}}</p>

Kemudian pada server.component.ts, tambahkan deklarasi property serveCreated. Kemudian tambahkan perintah merubah value menjadi true pada method onServerCreate(). (Lihat baris dengan comentar).

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

@Component({
    selector: 'app-server',
    templateUrl: './server.component.html',
    styleUrls: ['./server.component.css']
})
export class ServerComponent {
    serverId: number = 1;
    serverStat: string = 'online';
    allowNewServer: boolean = false;
    serverCreationStat: string = 'No server created...';
    serverName: string = 'anonymous';
    //tambahkan untuk keperluan demo ngIf
    serverCreated: boolean = false;

    constructor(){
        setTimeout(()=>{this.allowNewServer = true;}, 2000);
    }

    getServerStat(){
        return this.serverStat;
    }

    onServerCreate(){
        this.serverCreationStat = this.serverName + ' Server created...';
        //tambahkan untuk keperluan demo ngIf
        this.serverCreated  = true;
    }

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

Perhatian, directive ngIf diatas, akan menambahkan element <p> pada DOM jika kondisi dipenuhi. Element bukan disembunyikan, tetapi ditambahkan. Hal ini penting untuk dipahami.

Sama seperti block if, kita juga bisa menambahkan else pada ngIf.

Melanjutkan contoh diatas, kita ubah template server.component.html menjadi seperti code dibawah.

Digunakan tag khusus yaitu <ng-template> dengan local reference. Didalam <ng-template> dimasukan html yang akan ditampilkan jika kondisi else dipenuhi.

Local reference ini akan digunakan pada directive ngIf pada bagian else block.

<p>Server: {{serverId}} status: {{getServerStat()}}</p>
<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>