Templat dan pengikatan data

Templat memungkinkan Anda menampilkan konten dinamis di Angular. Pelajaran ini membahas cara kerja templat dan pengikatan data.

Apa itu templat?

Templat adalah HTML yang digunakan Angular untuk menampilkan tampilan komponen. Templat menggabungkan HTML dengan sintaks khusus Angular untuk menampilkan data.

Interpolasi

Interpolasi memungkinkan Anda menyisipkan nilai dari komponen ke dalam HTML. Gunakan kurung kurawal ganda untuk menampilkan data:

{{ data }}

{{ username }}

Pengikatan properti

Pengikatan properti memungkinkan Anda mengatur properti elemen HTML secara dinamis:

[src] = "imageUrl"

<img [src]="user.profilePicture">

Pengikatan peristiwa

Pengikatan peristiwa memungkinkan aplikasi Anda merespons tindakan pengguna:

(click)="onClick()"

<button (click)="showAlert()">Click me</button>

Pengikatan dua arah

Pengikatan dua arah menjaga antarmuka pengguna dan data tetap tersinkronisasi. Gunakan [(ngModel)]:

<input [(ngModel)]="user.name">

Direktif struktural

Direktif struktural mengubah tata letak DOM. Contohnya mencakup *ngIf dan *ngFor.

<div *ngIf="isVisible">Visible Content</div>

Menggunakan ngFor

*ngFor mengulang data dan menampilkan elemen berulang kali:

<li *ngFor="let item of items">{{ item }}</li>

Ringkasan

Anda telah mempelajari cara menggunakan templat dan pengikatan data untuk membuat tampilan Angular yang dinamis!