Data Binding – String Interpolation

Data binding adalah cara kita menggabungkan data dari typescript ke HTML template. Ada beberapa pendekatan, pada modul ini kita bahas String Interpolation.

Berikut adalah format String interpolation yang valid:

{{nama_variable}}
{{method_call}}
{{'string goes here'}}

Jadi, string interpolation menampilkan data dari property, atau return dari method menjadi string.

Melanjutkan dari project modul sebelumnya, buka file server.component.html

Skenarionya adalah, kita akan menampilkan data server ID dan server status.

<p>Server: {{serverId}} status: {{getServerStat()}}</p>

Kemudian buka file server.component.ts, pada class tambahkan variable serverId dan serverStat seperti dibawah.

Untuk kesederhaan demo, kita hardcode nilai dari variable. Pada prakteknya, Anda bisa melakukan database query, atau API call dan lainnya.

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';

    getServerStat(){
        return this.serverStat;
    }
 }

Jika Anda jalankan, sesuai ekspektasi, akan ditampilkan seperti dibawah.