Pengenalan Angular Directive

Directive adalah class yang berfungsi menambahkan behavior pada element. Terdapat 2 tipe direktif, yaitu attribute dan structural directive.

Attribute Directive	Structural Directive
Mirip dengan normal HTML Attribute	Diawali dengan tanda asterisk (*)
Perubahan hanya terhadap element, misalnya: mengubah warna background.	Mempengaruhi struktur DOM (element bisa ditambahkan atau dikeluarkan dari DOM)

Angular memiliki directive built-in untuk mengatur forms, lists, styles. Selain built-in directive, kita juga bisa membuat custom directive.

Untuk membuat directive, digunakan keyword @Directive. Selector yang digunakan umumnya selector attribute, atau menggunakan tanda bracket square “[ ]”.

@Directive({
  selector: '[ubahJadiHijau]'
})
export class ubahJadiHijauDirective{
}

Contoh penggunaan pada file HTML.

<p ubahJadiHijau>Warna hijau</p>

Perlu dipahami, component juga termasuk directive, yaitu directive dengan template.

Pada modul selanjutnya kita akan bahas directive built-in dari Angular.