Setelah bermain dengan Angular untuk waktu yang lama, saya akhirnya mendapatkan penjelasan yang bisa dimengerti tentang arahan Angular. Pada artikel ini, pertama-tama kita akan memahami apa sebenarnya arahan itu dan bagaimana menggunakannya di Angular. Kami juga akan membuat arahan khusus kami sendiri. Jadi apa yang kita tunggu? Mari selami lebih dalam.

Apa itu Angular Directive?

Direktif adalah fungsi yang akan dijalankan setiap kali kompiler Angular menemukannya . Angular Directives meningkatkan kemampuan elemen HTML dengan melampirkan perilaku khusus ke DOM.

Dari konsep inti, arahan Angular dikategorikan menjadi tiga kategori.

1. Atribut Direktif
2. Arahan Struktural
3. Komponen

Atribut Direktif

Atribut Direktif bertanggung jawab untuk memanipulasi tampilan dan perilaku elemen DOM. Kita bisa menggunakan arahan atribut untuk mengubah gaya elemen DOM. Arahan ini juga digunakan untuk menyembunyikan atau menampilkan elemen DOM tertentu secara bersyarat. Angular menyediakan banyak Atribut Direktif bawaan seperti NgStyle , NgClass , dll. Kita juga dapat membuat Arahan Atribut kustom kita sendiri untuk fungsionalitas yang kita inginkan.

Arahan Struktural

Petunjuk Struktural bertanggung jawab untuk mengubah struktur DOM. Mereka bekerja dengan menambahkan atau menghapus elemen dari DOM, tidak seperti Atribut Direktif yang hanya mengubah tampilan dan perilaku elemen.

Anda dapat dengan mudah membedakan antara Petunjuk Struktural dan Atribut dengan melihat sintaks. Nama Petunjuk Struktur selalu dimulai dengan awalan tanda bintang (*), sedangkan Petunjuk Atribut tidak berisi awalan apa pun. Tiga Structural Directives Angular bawaan paling populer yang disediakan adalah NgIf , NgFor , dan NgSwitch .

Komponen

Komponen adalah arahan dengan templat. Satu-satunya perbedaan antara Komponen dan dua jenis arahan lainnya adalah Templatenya. Atribut dan Arahan Struktural tidak memiliki Template. Jadi, kita dapat mengatakan bahwa Komponen adalah versi Directive yang lebih bersih dengan templat, yang lebih mudah digunakan.

Menggunakan Angular Built-In Directive

Ada banyak Directives bawaan yang tersedia di Angular yang dapat Anda gunakan dengan mudah. Di bagian ini, kita akan menggunakan dua arahan bawaan yang sangat sederhana.

NgStyle Directive adalah direktif Atribut yang digunakan untuk mengubah gaya elemen DOM apa pun berdasarkan beberapa kondisi.

 I am an Attribute Directive

Dalam potongan kode di atas, kami menambahkan latar belakang biru jika nilai isBluevariabel benar. Jika nilai isBluevariabel salah, maka latar belakang elemen di atas akan berwarna merah.

NgIf Directive adalah arahan struktural yang digunakan untuk menambahkan elemen ke dalam DOM sesuai dengan beberapa kondisi.

I am a Structural Directive

Dalam potongan kode di atas, seluruh paragraf akan tetap berada di DOM jika nilai showvariabelnya benar, jika tidak maka akan dimulai dari DOM.

Membuat Petunjuk Atribut Khusus

Membuat direktif kustom sama seperti membuat komponen Angular. Untuk membuat arahan khusus kita harus mengganti @Componentdekorator dengan @Directivedekorator.

Jadi, mari kita mulai dengan membuat direktif Atribut Kustom pertama kita. Dalam arahan ini, kita akan menyorot elemen DOM yang dipilih dengan menyetel warna latar belakang elemen.

Buat app-highlight.directive.tsfile di src/appfolder dan tambahkan cuplikan kode di bawah ini.

import { Directive, ElementRef } from '@angular/core';

@Directive({

 selector: '[appHighlight]'

})

export class HighlightDirective {

 constructor(private eleRef: ElementRef) {

 eleRef.nativeElement.style.background = 'red';

 }

}

Di sini, kami mengimpor Directivedan ElementRefdari inti Angular. The Directivemenyediakan fungsionalitas @Directivedekorator di mana kami menyediakan pemilih propertinya appHighLightsehingga kami dapat menggunakan selektor ini di mana saja dalam aplikasi. Kami juga mengimpor ElementRefyang bertanggung jawab untuk mengakses elemen DOM.

Sekarang agar appHighlightDirective berfungsi, kita perlu menambahkan Directive ke array deklarasi di app.module.tsfile.

import ...;

import { ChangeThemeDirective } from './app-highlight.directive';

@NgModule({

declarations: [

AppComponent,

ChangeThemeDirective

],

imports: [

...

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Sekarang kita akan menggunakan custom directive yang baru kita buat. Saya menambahkan appHightlightarahan di app.component.htmltetapi Anda dapat menggunakannya di mana saja dalam aplikasi.

Highlight Me !

Output dari potongan kode di atas akan terlihat seperti ini.

Membuat Petunjuk Struktural Kustom

Di bagian sebelumnya, kami membuat direktif Atribut pertama kami. Pendekatan yang sama juga digunakan untuk membuat arahan struktural.

Jadi, mari kita mulai dengan membuat arahan struktural kita. Dalam arahan ini, kita akan menerapkan *appNotarahan yang akan bekerja berlawanan dengan *ngIf.

Sekarang buat app-not.directive.tsfile di src/appfolder dan tambahkan kode di bawah ini.

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({

 selector: '[appNot]'

})

export class AppNotDirective {

constructor(

 private templateRef: TemplateRef,

 private viewContainer: ViewContainerRef) { }

 @Input() set appNot(condition: boolean) {

 if (!condition) {

 this.viewContainer.createEmbeddedView(this.templateRef);

 } else {

 this.viewContainer.clear(); }

 }

}

Seperti yang Anda lihat pada potongan kode di atas, kami mengimpor Directive, Input, TemplateRef and ViewContainerRefdari@angular/core.

Directivemenyediakan fungsi yang sama untuk @Directivedekorator. The Inputdekorator digunakan untuk berkomunikasi antara dua komponen. Ini mengirimkan data dari satu komponen ke komponen lainnya menggunakan pengikatan properti.

TemplateRefmewakili template tersemat yang digunakan untuk membuat instance tampilan yang disematkan. Tampilan yang disematkan ini ditautkan ke template yang akan dirender.

ViewContainerRefadalah wadah tempat satu atau beberapa tampilan dapat dilampirkan. Kita dapat menggunakan createEmbeddedView()fungsi untuk melampirkan templat yang disematkan ke dalam wadah.

Sekarang agar appNotdirektif berfungsi, kita perlu menambahkan direktif ke array deklarasi di app.module.tsfile.

import ...;

import { AppNotDirective } from './app-not.directive';

@NgModule({

declarations: [

AppComponent,

AppNotDirective

],

imports: [

...

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Sekarang, saatnya menggunakan arahan struktural yang baru kita buat.

Saya menambahkan appNotarahan di app.component.htmltetapi Anda dapat menggunakannya di mana saja dalam aplikasi.

True
False

The *appNotdirektif dirancang dengan cara yang itu menambahkan elemen template ke DOM jika *appNotnilai adalah falsejustru sebaliknya *ngIfdirektif.

Output dari potongan kode di atas akan terlihat seperti ini.

Saya harap artikel ini menjawab sebagian besar pertanyaan Anda tentang arahan Angular. Jika Anda memiliki pertanyaan atau keraguan, silakan hubungi saya di kotak komentar.