Two-way Binding Pada Angular

Two-way binding adalah cara data binding dimana event dan property binding dilakukan bersamaan. Two-way binding menggunakan special directive ngModel.

Untuk lebih jelasnya, kita ubah file server.component.html menjadi seperti berikut.

<p>Server: {{serverId}} status: {{getServerStat()}}</p>
<p>{{serverCreationStat}}</p>
<hr>
<label>Server Name</label>
<!-- sebelumnya melakukan passing data menggunakan variable $event -->
<!-- <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>

Pada contoh diatas, dengan menggunakan Two-way binding, perubahan pada HTLM input akan langsung mengubah nilai variable serverName pada server.component.ts.

Demikian juga sebaliknya value pada input type langsung diisi dengan value serverName.

Karena two-way binding menggunakan ngModel directive, maka library FormsModul harus diimport pada app.module.ts.

Berikut isi app.module.ts

import { NgModule } from '@angular/core';
//tambahkan untuk menggunakan two-way binding
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { ServerComponent } from './server/server.component';
import { ServersComponent } from './servers/servers.component';

@NgModule({
  declarations: [
    AppComponent,
    ServerComponent,
    ServersComponent
  ],
  imports: [
    BrowserModule,
    FormsModule //tambahkan untuk menggunakan two-way binding
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Dengan menggunakan two-way binding, method onUpdateNameServer(event : Event) dapat diabaikan.

Berikut isi akhir dari file server.component.ts

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...';
    //event binding with data
    serverName: string = 'anonymous';

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

    getServerStat(){
        return this.serverStat;
    }

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

    //dapat dihapus jika menggunakan two-way binding
    //event binding with data
    // onUpdateNameServer(event : Event){
    //     this.serverName = (<HTMLInputElement>event.target).value
    // }
 }