Angular'da Özel Yönergeler

Yönergeler, HTML'i genişletmenizi sağlar. Bu derste özel yönergeler ve kendi yönergelerinizi nasıl oluşturabileceğiniz tanıtılmaktadır.

Yönerge Nedir?

Yönergeler, DOM öğelerinin görünümünü veya davranışını değiştirir. Angular, *ngIf ve *ngFor gibi yerleşik yönergeler sağlar.

Yönerge Türleri

• Bileşen Yönergeleri
• Öznitelik Yönergeleri - görünümü veya davranışı değiştirir
• Yapısal Yönergeler - düzeni değiştirir (*ngIf gibi)

Öznitelik Yönergesi Oluşturma

Angular CLI'ı kullanarak bir yönerge oluşturun:

ng generate directive highlight

ng generate directive highlight

Yönergeyi Uygulama

Yönergenizi şablonunuzda bir öznitelik olarak kullanın:

<p appHighlight>Highlighted Text</p>

<p appHighlight>Highlighted Text</p>

Yönerge Mantığı

Yönergeler, DOM öğelerini değiştiren bir mantık içerir. Örneğin, arka plan rengini dinamik olarak ayarlayabilirsiniz.

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

@HostListener Dekoratörü

Yönergenizin bulunduğu öğelerdeki olaylara yanıt vermek için @HostListener kullanın:

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

Yönergelerde @Input()

@Input(), şablonlardan yönergelere veri aktarmanızı sağlar:

@Input() defaultColor: string;

Özet

Angular uygulamalarınızı geliştirmek için özel yönergeleri nasıl oluşturacağınızı ve kullanacağınızı öğrendiniz. Çok iyi iş çıkardınız!