Tutorial ini adalah langkah pertama membuat aplikasi Tour of Heroes. Ikuti langkah-langkah setup untuk membuat project baru dengan nama angular-tour-of-heroes. Struktur file akan terlihat seperti berikut.

angular-tour-of-heroes
|
 -src
| |
| -app
| | |
| | -app.compponent.ts
| | |
| | -app.module.ts
| |
| -main.ts
| |
| -index.html
| |
| -styles.css
| |
| -systemjs.config.js
| |
| -tsconfig.json
|
-node_modules
|
-package.json

Transpiling dan Running app

Buka terminal lalu tulis dan enter command berikut ini:

npm start

Perintah ini akan menjalankan compiler TypeScipt di dalam “Watch mode”, dan akan me-recompiling secara automatis ketika kode berubah. Perintah tersebut secara simultan me-launch aplikasi di dalam browser dan me-refresh browser ketika kode berubah.

Kita dapat tetap mengerjakan aplikasi tanpa pause untuk recompile atau refresh browser.

Show the Heroes

Tambahkan 2 property di dalam AppComponent, sebuah property title untuk nama aplikasi dan property hero dengan nama “Windstorm”.

app.component.ts (AppComponent class)

export class AppComponent {
  title = 'Tour of Heroes';
  hero = 'Windstorm';
}

Sekarang update template di dalam @Component decorator dengan data binding.

app.component.ts (@Component)


template: `<h1>{{title}}</h1><h2>{{hero}} details!</h2>`

Refresh browser dan akan menampilkan title dan nama hero. Tanda double kurung kurawal merupakan Angular sintaks interpolation binding.

Hero Object

Hero membutuhkan lebih banyak property. Convert hero dari string ke class. Buat class hero dengan property id dan name. Tambahkan property berikut di bagian atas aplikasi, di atas @Component.

src/app/app.component.ts (Hero class)

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

Di dalam class AppComponent, refactor component property hero menjadi Hero type, lalu inisiasi id dengan 1 dan name dengan Windstorm.

src/app/app.component.ts (hero property)

hero: Hero = {
  id: 1,
  name: 'Windstorm'
};

Karena kita merubah hero dari string ke object, update binding di dalam template yang mengambil property name hero.


template: `<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>`

Menambah HTML dengan multi-line template strings

Untuk menampilkan semua property hero, tambahkan <div> untuk property id pada hero dan <div> untuk property name pada hero. Untuk menjaga template agar tetap terbaca, letakan <div> di setiap line code dengan menggunakan backticks.

app.component.ts (AppComponent’s template)


template: `
  <h1>{{title}}</h1>
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div><label>name: </label>{{hero.name}}</div>
`

Edit hero name

User harus dapat men-edit nama hero di dalam <input> textbox. Textbox harus dapat menampilkan keduanya, property name dan property update yang di ketikan user.

Kita membutuhkan two-way binding antara element <input> form dan property hero.name.

Two-way binding

Refactor nama hero di dalam template sehingga terlihat seperti kode berikut.

<div>
  <label>name: </label>
  <input [(ngModel)]="hero.name" placeholder="name">
</div>

[(ngModel)] merupakan syntax Angular untuk binding property hero.name di dalam textbox.

Aplikasi akan error, dan jika kita lihat dalam browser console, kita akan melihat Angular memberitahukan errornya “ngModel … isn’t a known property of input.”

NgModel adalah directive valid dari Angular, dan itu tidak tersedia secara default. Ini termasuk dalam optional module FormsModule. Kita harus menambahkan module tersebut secara manual.

import FormsModule

Buka file app.module.ts dan import FormsModule. AppModule sekarang menjadi terlihat seperti berikut.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms'; // <-- NgModel lives here
import { AppComponent }  from './app.component';
@NgModule({
  imports: [
    BrowserModule,
    FormsModule // <-- import the FormsModule before binding with [(ngModel)]
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Read more about FormsModule and ngModel in the Two-way data binding with ngModel section of the Forms guide and the Two-way binding with NgModel section of the Template Syntax guide.

Ketika browser di refresh, app kembali berjalan dengan normal.

Apa saja yang sudah kita pelajari?

Berikut adalah file app.component.ts yang lengkap.


import { Component } from '@angular/core';
export class Hero {
  id: number;
  name: string;
}
@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <h2>{{hero.name}} details!</h2>
    <div><label>id: </label>{{hero.id}}</div>
    <div>
      <label>name: </label>
      <input [(ngModel)]="hero.name" placeholder="name">
    </div>
    `
})
export class AppComponent {
  title = 'Tour of Heroes';
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}

Referensi