Directive Built-in ngClass

Directive ngClass berfungsi untuk menambah CSS class pada element HTML jika kondisi tertentu dipenuhi.

Contoh skenario, jika status server online, tulisan akan ditampilkan bold.

Buka file server.component.html, tambahkan code ngClass seperti berikut.

Tujuan dari code adalah, jika nilai variable serverStat adalah online, maka tambahkan class css .online pada element.

<p [ngStyle]="{backgroundColor: getColor()}"
    [ngClass]="{online: serverStat==='online'}"
>
    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>

Kemudian buka server.component.ts, ubah pada property style pada @Component, dengan menambahkan class css .online.

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;

    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, text akan ditampilkan bold saat serverStat online.