Template syntax adalah cara template membaca data dari class komponennya. Ada tiga bentuk dasar: {{ }} untuk teks, [ ] untuk property elemen, dan [attr. ] untuk atribut HTML. Bayangin papan menu Martabak Bang Jali yang angkanya pakai magnet. Tulisan "Rp" dan nama menunya dicat permanen, sedangkan angka harganya ditempel dan bisa diganti kapan saja. Template itu papannya, {{ harga }} itu slot magnetnya, dan class komponen itu Bang Jali yang menempel angka barunya. Begitu angkanya diganti di class, papannya ikut berubah.
🧪 Tebakan cepat: Di class,
harga = 50000. Apa yang tampil dari<p>{{ harga * 2 }}</p>? Dan dari<p>harga * 2</p>, yang tanpa kurung kurawal? Jawabannya ada di bagian "Interpolasi: {{ }}".
Interpolasi: {{ }}
import { Component } from '@angular/core'
@Component({
selector: 'app-root',
standalone: true,
template: `
<h1>{{ judul }}</h1>
<p>{{ menu }}: Rp{{ harga }}</p>
<p>Dua porsi: Rp{{ harga * 2 }}</p>
<p>harga * 2</p>
`,
})
export class App {
judul = 'Martabak Bang Jali'
menu = 'Martabak Telur Spesial'
harga = 50000
}
Yang tampil di halaman:
Martabak Bang Jali
Martabak Telur Spesial: Rp50000
Dua porsi: Rp100000
harga * 2
- Di dalam
{{ }}ada ekspresi: potongan kode yang menghasilkan nilai, dibaca dari class.{{ harga * 2 }}denganharga = 50000menghasilkan100000. Tanpa kurung kurawal,harga * 2cuma teks biasa dan tampil apa adanya. Itu jawaban tebakannya. - Hasilnya selalu diubah jadi teks.
nulldanundefinedtampil kosong. - Angkanya tampil
50000, tanpa titik ribuan. Format rupiah dibahas di pelajaran Pipes. - Interpolasi menampilkan teks, bukan HTML.
deskripsi = '<b>Pedas</b>'tampil sebagai tulisan<b>Pedas</b>, tag-nya gak jalan. Ini sengaja, supaya teks dari pengguna gak bisa menyisipkan HTML ke halamanmu.
Ekspresi di template punya batas. Compiler Angular menolak ini, dan satu error di template membuat seluruh komponen gagal tampil:
| Ditulis | Pesan dari compiler (Angular 18) |
|---|---|
{{ harga = 0 }} |
Parser Error: Bindings cannot contain assignments |
{{ new Date() }} |
Parser Error: Unexpected token 'Date' |
Property binding: [ ]
<img [src]="foto" [alt]="menu" />
<button [disabled]="habis">Pesan</button>
foto = 'martabak-telur.jpg'
habis = false
- Kurung siku artinya: isi tanda kutipnya adalah ekspresi yang dibaca dari class, dan hasilnya dipasang ke property DOM elemen itu.
[src]="foto"sama dengan menjalankanimg.src = this.foto. - Tanpa kurung siku,
src="foto"mengirim teksfotoapa adanya. Browser mencari file bernamafoto, dan gambarnya rusak. [disabled]="habis":falsemembuat tombol aktif,truemematikannya.src="{{ foto }}"juga jalan untuk teks, karena Angular mengubahnya jadi property binding. Tapi untuk nilai selain teks, misalnya boolean, pakai[ ]. Latihan kedua menolak semuasrc=yang diketik langsung di<img>, jadi tulis[src].- Jangan dicampur:
[src]="{{ foto }}"ditolak denganParser Error: Got interpolation ({{}}) where expression was expected.
Attribute, class, dan style binding
<td [attr.colspan]="lebarKolom">Paket Hemat</td>
<p [class.habis]="habis">Terang Bulan Pandan</p>
<div [style.width.px]="lebarBar"></div>
- Property binding cuma bisa ke property yang memang ada di elemen DOM.
tdpunya propertycolSpan(S besar), bukancolspan, jadi[colspan]="lebarKolom"ditolak:NG0303: Can't bind to 'colspan' since it isn't a known property of 'td'.[attr.colspan]menulis atributnya langsung, hasilnya<td colspan="2">. Pakai[attr. ]juga untukaria-labeldan teman-temannya. [class.habis]="habis"menambah classhabissaattrue, dan melepasnya saatfalse.[style.width.px]="lebarBar"mengisiwidthdengan satuan px:lebarBar = 120jadiwidth: 120px.
Kapan pakai yang mana
| Mau... | Tulis |
|---|---|
| teks di dalam tag | {{ menu }} |
| property elemen (src, disabled, value) | [src]="foto" |
| atribut yang gak punya property bernama sama (colspan, aria-label) | [attr.colspan]="lebarKolom" |
| satu class nyala atau mati | [class.habis]="habis" |
| satu style dengan satuan | [style.width.px]="lebarBar" |
⚠️ Jebakan yang sering ketemu
- Lupa kurung siku.
src="imageUrl"mengirim teksimageUrl, bukan alamat yang disimpan di properti itu. disabled="{{ habis }}". Hasil interpolasi selalu teks, dan teks"false"tetap dianggap benar. Tombolnya mati walauhabisbernilaifalse. Tulis[disabled]="habis".{{ }}di dalam[ ].[src]="{{ foto }}"gagal dikompilasi. Di dalam kurung siku, tulis ekspresinya saja:[src]="foto".[colspan]. NG0303, karena property-nya bernamacolSpan. Pakai[attr.colspan].
TL;DR: {{ ekspresi }} menampilkan hasil ekspresi dari class sebagai teks: {{ harga * 2 }} dengan harga = 50000 jadi 100000, HTML di dalamnya tampil sebagai tulisan, dan assignment atau new ditolak compiler. [property]="ekspresi" memasang nilai ke property DOM, misalnya [src]="foto" dan [disabled]="habis"; tanpa kurung siku nilainya cuma teks apa adanya. [attr.colspan] untuk atribut yang gak punya property bernama sama, [class.habis] untuk satu class, [style.width.px] untuk satu style dengan satuan. Jangan taruh {{ }} di dalam [ ].
