Cara Membuat Data Binding di Angular Part 3

bewoksatukosong.com | Halo semuanya balik lagi dengan om bewok, mari kita lanjutkan tutorial ini mengenai Data Binding Pada Angular Part 3.
Data binding adalah two way direction, bingung kan ? intinya kalau kita ngubah di form maka text yang kita tampilkan di browser dia akan ikutan berubah. Jadi kayak semacam real time gitu.

Udah langsung saja kita mulai tutorialnya. Oh iya ini adalah tutorial series belajar angular, yang mau lihat daftar tutorialnya bisa lihat dibawah ini ya
DAFTAR TUTORIAL ANGULAR 2019

Pertama yang kita butuhkan adalah sebuah class baru yang isinya adalah property id dan name. jadi kita buat dulu nih type data nya apa aja dan nama property nya juga harus jelas.
Kita buat ini di src/app/foods.ts
foods.ts

export class Foods {
 id: number;
 name: string;
}

Selanjutnya kita buka src/app/food/food.component.ts
Lalu kamu tambahkan import dari foods.ts dan tambahkan data, datanya hanya contoh ya kalau biasanya untuk membuat aplikasi beneran biasanya dari server rest api yang datanya berbentuk json.
food.component.ts

import { Component, OnInit } from '@angular/core';
import { Foods } from '../foods'; // tambahkan ini import foods.ts

@Component({
  selector: 'app-food',
  templateUrl: './food.component.html',
  styleUrls: ['./food.component.css']
})
export class FoodComponent implements OnInit {

 /**** tambahkan data nya disini. laper yang bakal kita panggil variabel
       untuk di food.component.html
 *****/ 
 laper: Foods = {
  id: 1,
  name: 'nasi uduk'
 };
 /**** 
  end data
 *****/ 

 
  constructor() { }

  ngOnInit() {
  }

}

Lalu kalian buka src/app/food/food.component.html
food.component.html

<h2>{{laper.name|uppercase}} details</h2>
<div><span>id: {{laper.id}}</span></div>
<div><span>name: {{laper.name}}</span></div>
<br>
<div>
 <label>name:
  <input [(ngModel)]="laper.name" placeholder="name"/>
 </label>
</div>

BELUM SELESAI, KARENA SUDAH PASTI ERROR. karena ngModel ini adalah bagian dari Forms Module, nah Forms Module ini belum kita masukin, dia ada di app.module.ts

Kalian buka src/app/app.module.ts
app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FoodComponent } from './food/food.component'; 

import { FormsModule } from '@angular/forms'; // Tambahkan forms module(1)

@NgModule({
  declarations: [
    AppComponent,
    FoodComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule // tambahkan ini forms module (2)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Perhatikan! kita menambahkan Forms Module pada bagian import dan pada bagian dibawah 
imports: [FormsModule],

Oke baru kita run kembali dengan cara buka terminal kalian, lalu ketikan 
ng serve. lalu ketikan localhost:4200 di browser kalian

Gambar 1. Input real time

Jika hasilnya seperti dibawah. Selamat kalian berhasil menampilkan data dari class foods yang kita buat yang isinya id dan name, dan juga kita bisa membuat forms data binding, yang ketika kita mengetikan sesuatu pada forms tersebut, maka tampilanya pada textnya akan berubah secara real time

Kalau kalian mau liat daftar tutorial angular dan download source code nya bisa lihat dibawah ini ya
Daftar Tutorial Angular
Source code Angular