Directive Built-in ngStyle

ngStyle adalah directive yang digunakan untuk mengubah style pada element HTML.

Berikut contoh dengan skenario, kita akan mengubah warna background paragraph status server berdasarkan status online atau offline.

Buka file server.component.html, ubah element paragraph yang menampilkan text status server dengan menambahkan ngStyle.

<!-- menggunakan directive ngStyle -->

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

Perhatian directivenya adalah ngStyle, untuk mengatur nilainya, digunakan property binding, oleh karena itu ditulis menjadi [ngStyle].

Kemudian buka file server.component.ts, tambahkan kode pada constructor agar status server menjadi random antara offline atau online.

Tambahkan juga method getColor yang akan digunakan oleh directive ngStyle.

Code yang ditambahkan lihat bagian commentar //directive ngStyle

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';
    serverCreated: boolean = false;

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

    getServerStat(){
        return this.serverStat;
    }

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

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

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

Sesuai ekspektasi, warna background akan berubah sesuai status server.