Direktif khusus di Angular

Direktif memungkinkan Anda memperluas HTML. Pelajaran ini memperkenalkan direktif khusus dan cara membuatnya sendiri.

Apa itu direktif?

Direktif mengubah tampilan atau perilaku elemen DOM. Angular menyediakan direktif bawaan seperti *ngIf dan *ngFor.

Jenis direktif

• Direktif komponen
• Direktif atribut - mengubah tampilan atau perilaku
• Direktif struktural - mengubah tata letak (seperti *ngIf)

Membuat direktif atribut

Buat direktif menggunakan Angular CLI:

ng generate directive highlight

ng generate directive highlight

Menerapkan direktif

Gunakan direktif Anda sebagai atribut dalam templat:

<p appHighlight>Highlighted Text</p>

<p appHighlight>Highlighted Text</p>

Logika direktif

Direktif berisi logika yang mengubah elemen DOM. Misalnya, Anda dapat mengatur warna latar belakang secara dinamis.

constructor(private el: ElementRef) {
  this.el.nativeElement.style.backgroundColor = 'yellow';
}

Dekorator @HostListener

Gunakan @HostListener untuk merespons peristiwa pada elemen yang menggunakan direktif Anda:

@HostListener('mouseenter') onMouseEnter() {
  this.highlight('blue');
}

@Input() dalam direktif

@Input() memungkinkan Anda meneruskan data ke direktif dari templat:

@Input() defaultColor: string;

Ringkasan

Anda telah mempelajari cara membuat dan menggunakan direktif khusus untuk meningkatkan aplikasi Angular Anda. Kerja bagus!