Templat dalam Angular

Jan 13 2023
Di Angular, templat adalah cetak biru untuk fragmen antarmuka pengguna (UI). Template ditulis dalam HTML, dan sintaks khusus dapat digunakan di dalam template untuk membangun banyak fitur Angular.

Di Angular, templat adalah cetak biru untuk fragmen antarmuka pengguna (UI). Template ditulis dalam HTML, dan sintaks khusus dapat digunakan di dalam template untuk membangun banyak fitur Angular.

Angular memperluas sintaks HTML di template Anda dengan fungsionalitas tambahan.
Misalnya, sintaks pengikatan data Angular membantu menyetel properti Document Object Model (DOM) secara dinamis.

Hampir semua sintaks HTML adalah sintaks template yang valid. Namun, karena template Angular hanyalah sebuah fragmen dari UI, itu tidak menyertakan elemen seperti <html>, <body>, atau <base>.

Catatan: - Untuk menghilangkan risiko serangan injeksi skrip, Angular tidak mendukung elemen <script> dalam template. Angular mengabaikan tag <script> dan mengeluarkan peringatan ke konsol browser. Untuk informasi selengkapnya, lihat halaman Keamanan.

Menampilkan nilai dengan interpolasi

Interpolasi mengacu pada menyematkan ekspresi ke dalam teks yang ditandai. Secara default, interpolasi menggunakan kurung kurawal ganda {{ dan }} sebagai pembatas.

Contoh:

app.component.ts

message = "Here is the initialize message";

<p> {{message}} </p>

Contoh:-

<p>{{title}}</p>
<div><img alt="item" src="{{itemImageUrl}}"></div>

app.component.ts

message = "Here is the initialize message";
getMessage():string{
  return this.message;
}

<p>{{getMessage()}}</p>

Pernyataan template adalah metode atau properti yang dapat Anda gunakan di HTML untuk merespons peristiwa pengguna. Dengan pernyataan template, aplikasi Anda dapat melibatkan pengguna melalui tindakan seperti menampilkan konten dinamis atau mengirimkan formulir.

Contoh:-

(click) = "updateMessage()"
<button (click) = "updateMessage()">Update Message</button>

Seperti ekspresi template, pernyataan template menggunakan bahasa yang terlihat seperti JavaScript. Namun, parser untuk pernyataan template berbeda dengan parser untuk ekspresi template. Selain itu, parser pernyataan templat secara khusus mendukung penetapan dasar (=) dan ekspresi berantai dengan titik koma (;).

Sintaks JavaScript dan ekspresi template berikut tidak diperbolehkan:

  1. baru
  2. Operator kenaikan dan penurunan, ++ dan -
  3. Penetapan operator, seperti += dan -=
  4. Operator bitwise, seperti | dan &
  5. Operator pipa