Component’s Template

TemplateUrl atau Inline Template?

Jika Anda jeli, pada tutorial sebelum ini kita selalu menggunakan file HTML terpisah untuk membuat template (konten) suatu component, seperti ini misalnya:

Penggunaan templateUrl

Opsi templateUrl mengindikasikan path dimana template (konten HTML) suatu component berada.

Namun sebagai alternatif, kita bisa pun menggunakan inline template.

Inline Template pada Komponen Product

Hapus dahulu template pada file HTML-nya:

Menghapus seluruh konten pada component’s HTML

Lalu ganti templateUrl menjadi template, dan isi seperti ini:

Penggantian dan isi dari opsi template

Inline Template pada Komponen Products

Hapus dulu juga template pada file HTML-nya:

Menghapus seluruh konten pada component’s HTML

Lalu ganti templateUrl menjadi template, dan isi seperti ini:

Penggantian dan isi dari opsi template

Perhatikan bahwa di sini kita gunakan tanda backtick “`" agar penulisan kode dapat dibuat multi-line.

Pembuktian

Terakhir: jalankan “ng serve” dan buka app pada browser.

Anda seharusnya akan dapati tampilan yang sama persis dengan tutorial sebelumnya.

Hasil dari inline template

Atribusi Anda berupa clapping, sharing, ngasih komentar, dan following blog ini dapat menimbulkan efek samping berupa semangat menulis yang menggebu bagi saya 