Card image cap
[Angular 7][10] Penggunaan Two Ways Binding
Tuesday, 26 Mar 2019

Hello world,

Two ways binding hampir sama penggunaannya dengan Onkey dan Template Reference Variable. Perbedaannya ada pada flow data dan penulisannya. Dimana jika onkey dan TRV hanya dapat mengambil data dari html untuk dikirimkan ke component melalui method dll untuk mengubah value atau variable tertentu, Two ways binding dapat bekerja untuk mengambil data dari html dikirimkan ke component tanpa menggunakan event ataupun method dan dapat mengambil data dari component secara bersamaan untuk ditampilkan dalam html.

Simpelnya jika kita memiliki variable nama di dalam component yang berisi value 'Angular' dan ditampilkan dalam html menggunakan interpolation {{ ... }}, maka jika dijalankan website akan menampilkan tulisan 'Angular'. Kemudian jika kita buat sebuah tag input menggunakan Two Ways Binding (lihat contoh) maka form input akan berisi value 'Angular' jika dijalankan. Kemudian jika value dari form input kita ubah maka secara langsung value dari nama dalam component juga akan berubah dan {{nama}} dalam html juga akan berubah. Begitu juga jika kita ubah nama dalam component maka value input dan {{nama}} akan berubah.  

Tanda pada [( … )] adalah tanda two ways binding yang artinya penggunaan [ .. ] adalah one way binding. 

Contoh: 

<input [(ngModel)]="nama" placeholder="Nama">
{{nama}}


import { Component } from '@angular/core';

@Component({

selector: 'app-root',

  templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'namaweb';


  nama = '';        

}

Jika dijalankan maka akan muncul error pada console “Can't bind to 'ngModel' since it isn't a known property of 'input'.” Karena belum adanya FormsModule. Tambahkan FormsModule pada app.module.ts 

import { FormsModule } from '@angular/forms';


@NgModule({

  declarations: [

    AppComponent,

    ProductComponent,

  ],

  imports: [

    BrowserModule,

    FormsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})


Selamat Mencoba :)