Directive Nedir ?

Angular’ da DOM manipülasyonları yaparken en çok kullandığımız özelliklerden biri de directive’ lerdir.
HTML elementlerine eklenirler ve eklendikleri element’ in DOM manipülasyonlarını gerçekleştirirler.
Angular pek çok dahili directive’ i barındırmaktadır. Örneğin; ngFor, ngIf, ngClass, ngStyle ilk akla gelenlerdir.
Bu başlıkta, kendi directive’ imizi de yazmayı inceleyeceğiz.

Directive Oluşturmak

Örnek olarak oluşturacağımız directive basitçe, eklendiği element’ in arkaplan rengini değiştiricek.

Directive’ i ng-cli ile kolayca oluşturuyoruz;

ng g directive directives/highlight
  • directives klasörünün içinde highlight isminde bir directive oluşturduk.
  • highlight.directive.ts içerisindeki constructor metodunda, ekleneceğimiz html elementini ele almamız gerekiyor;
import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private elementRef: ElementRef) { 
  }

}

Angular’ da html elementlerinin ElementRef tipinde olduğunu unutmayınız.

ElementRef’ in import edildiğine dikkat ediniz : https://gelistir.net/411/angular-notlar/#AngularCore

  • Eklendiğimiz element üzerinde sağlıklı şekilde işlem yapmak için, "initialization" aşamasının sağlanması gerekiyor. Bu sebeple, directive’ e "OnInit" interface’ ini implement etmek ve ngOnInit metodunda gerekli işlemleri yapmamız gerekiyor;

    ngOnInit() {
    this.elementRef.nativeElement.style.backgroundColor = 'yellow';
    }
  • Constructor’ da elementRef ismiyle bağladığımız element’ in "nativeElement" özelliği üzerinden, style.backgroundColor özelliğini "green" olarak set ediyoruz. Bu sayede, eklendiğimiz element’ in arkaplan rengini "yellow" olarak değiştirmiş olacağız.

  • Directive’ in selector’ ünü herhangi bir element’ in tag’ inin içerisine ekliyoruz;

<p appHighlight> Test </p>

Cli ile oluşturduğunuz bileşenlerin isimlerini istediğiniz şekilde değiştirebilirsiniz. bknz : https://gelistir.net/411/angular-notlar/#CLI

Sonuç;

Angular’ da directive’ lerin geniş bir kullanım alanı vardır. Bu başlıkta sadece çok basit örneği uyguladık.

Last modified: 10 November 2019

Author

Comments

Write a Reply or Comment

Your email address will not be published.