Template Syntax & Property Binding

Penjelasan

Angular memakai {{ ekspresi }} untuk interpolasi teks (sama seperti Vue), dan [properti]="ekspresi" (property binding) untuk mengikat nilai TypeScript ke properti DOM elemen, mis. [src], [disabled], atau [class]. Beda dengan atribut HTML biasa yang statis, property binding selalu update otomatis kalau nilainya berubah.

Contoh Konsep

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

@Component({
    selector: 'app-profil',
    standalone: true,
    template: `
        <h1>Halo, {{ nama }}!</h1>
        <img [src]="urlGambar" [alt]="nama">
        <button [disabled]="sedangLoading">Simpan</button>
    `,
})
export class ProfilComponent {
    nama = 'CompileDaily';
    urlGambar = '/logo.png';
    sedangLoading = false;
}

Praktikum

Buat component dengan properti kota (string) dan populasi (number). Tampilkan keduanya lewat {{ }} di template, dan buat tombol dengan [disabled] terikat ke properti boolean sedangProses.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Kurung siku [properti] MENUNJUKKAN Angular "ini nilai dinamis, ambil dari properti class", sedangkan properti="teks biasa" (tanpa kurung siku) berarti nilai STATIS literal — kesalahan umum pemula adalah lupa kurung siku dan bertanya-tanya kenapa nilainya tidak pernah berubah.