Data Binding – Property Binding

Data binding menggunakan pendekatan Property binding dapat digunakan pada HTML attribute, directive dan component yang kita develop.

Untuk menggunakan property binding, attribute ditulis dalam square bracket “[ ]”.

[nama_attribute]

Kita gunakan component dari modul sebelumnya yaitu server.component.ts.

Skenarionya adalah, akan ditampilkan button dalam keadaan disabled. Setelah 2 detik, button akan otomatis enabled.

Pada file server.component.ts, tambahkan code dibawah.

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';
    //code yang ditambahkan
    allowNewServer: boolean = false;


    constructor(){
        setTimeout(()=>{this.allowNewServer = true;}, 2000);
    }
    //akhir code yang ditambahkan

    getServerStat(){
        return this.serverStat;
    }
 }

Kemudian buka file server.component.html, tambahkan element button.

Perhatikan, attribute disabled ditulis dalam square bracket. Setelah 2 detik nilai attribute akan diubah menjadi true.

<p>Server: {{serverId}} status: {{getServerStat()}}</p>
<button class="btn btn-primary" [disabled]="!allowNewServer">Add Server</button>

Sesuai ekspektasi, button akan berubah menjadi enabled setelah 2 detik.