Mengenal Directive: ngIf

Apa dan bagaimana ngIf itu?

Tutorial kali ini adalah tentang directive: ngIf.

Fungsi directive ini adalah menampilkan template (suatu konten) berdasarkan nilai boolean suatu expression.

Persiapan

Buat component baru

Buatlah component bernama Customer. Gunakan generator milik Angular CLI untuk mempercepatnya.

Membuat component baru dengan Angular CLI

Mengisi template component baru

Isi file customer.component.html dengan kode berikut:

Isi template component: Customer

Santai, kode diatas hanya untuk membuat satu form dan satu alert message ala Bootstrap 4.

Perhatikan bahwa pada:

1. Input text (line 6–7) kita pakai metode two-way binding terhadap variable customerName
2. Submit button (line 9–11) kita gunakan event binding pada event onClick-nya.
3. Alert message (line 14–22) kita gunakan string interpolation pada variable addNewMessage dan directive *ngIf yang akan bereaksi terhadap nilai boolean dari variable isAdded.

Mengatur logic component

Buka file customer.component.ts, lalu isi dengan kode berikut:

Logic component: Customer

Perhatikan bahwa kita membuat:

1. Tiga variables (line 9–11) yang digunakan untuk kebutuhan component
2. Function addNew() (line 18–21) yang akan di-fire saat button diklik

Memanggil component: Customer dalam template utama

Isi file app.component.html dengan kode berikut:

Isi template component utama

Fokus pada line 7 dimana kita memanggil component: Customer yang sudah kita buat di atas. Sisanya hanya layouting ala Bootstrap 4.

Hasil Percobaan #1

Jalankan “ng serve” di terminal, buka browser, dan Anda akan dapati tampilan seperti ini:

Hasil percobaan pertama

Penjelasan ngIf

Selama nilai boolean dari suatu expression (dalam tutorial ini adalah variable isAdded) belum true, maka template yang diberi directive ngIf tidak akan dibuat.

Untuk membuktikan hal ini, kembalilah pada browser lalu refresh. Kemudian bukalah Chrome DevTool > window Console:

Syntax khusus Angular untuk menandai suatu ngIf template

Perhatikan kode yang di-highlight di atas. Kode tersebut adalah milik Angular yang digunakan sebagai penanda suatu tempate ber-directive ngIf.

Saat kita mengisi input text dan mengklik submit button, maka kode HTML yang di-generate akan tampak berbeda seperti ini:

Penciptaan template (kode HTML) baru saat kondisi ngIf terpenuhi

Tampak pada window Console bahwa suatu template (kode HTML) baru akan di-generate saat kondisi ngIf terpenuhi.

Menambahkan “else”

Tak lengkap suatu “if” tanpa “else”. Demikian juga dengan ngIf pun memiliki “else”-nya.

Buka file customer.component.html, lalu tambahkan kode berikut:

Penambahan isi template

Pada file ini kita melakukan penambahan sebagai berikut:

1. Line 15: menambahkan instruksi “else noCustomerAdded”
2. Line 24–28: menambahkan inline template khusus Angular bernama #noCustomerAdded

Hasil Percobaan #2

Kembali ke browser, lakukan refresh, dan Anda akan dapati seperti ini:

Hasil penambahan “else” pada ngIf

Jelas terlihat bahwa sebelum kondisi ngIf terpenuhi, maka yang dimunculkan adalah else-nya, yaitu inline template.

Penjelasan “else”

Inline Template yang kita buat sebagai “else”-nya ngIf ini akan di-destroy saat kondisi ngIf terpenuhi.

Untuk membuktikan hal ini, kembalilah pada browser lalu refresh. Kemudian bukalah Chrome DevTool > window Console.

Sebelum kondisi ngIf terpenuhi

Di atas adalah kode HTML sebelum kondisi ngIf terpenuhi. Perhatikan bahwa nanti saat input text terisi dan submit button diklik, maka kode HTML yang di-highlight itu akan hilang (destroyed):

Setelah kondisi ngIf terpenuhi

See? Saat kondisi ngIf terpenuhi, maka kode HTML yang berisi inline template akan dihancurkan (destroyed) dan template dalam ngIf akan dibuat (generated).

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