Angular – exportAs Özelliği

Merhaba,

Bu içeriğimizde Angular’da, bir component’in veya directive’in şablon/template üzerinde kullanılırken belirli bir değişkene atanarak dışa aktarmamızı ve böylece genellikle HTML template’i içerisinde daha okunabilir ve yeniden kullanılabilir hale gelmesini sağlayan exportAs özelliğini inceliyor olacağız.

Şimdi ilk olarak directive’ler üzerinden başlayalım. Malumunuz bir directive’i aşağıdaki gibi oluşturmakta ve kullanmaktayız;

@Directive({
  selector: '[appMy]',
  standalone: true
})
export class MyDirective {
  constructor(private elementRef: ElementRef) {
    console.log('MyDirective ile işaretlendi.');
  }

  @HostListener('mouseover') onMouseOver() {
    this.toggleColor();
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.toggleColor();
  }

  toggleColor() {
    const color = this.elementRef.nativeElement.style.color;
    const colotToSet = color == 'red' ? 'black' : 'red';
    this.elementRef.nativeElement.style.color = colotToSet;
  }
}

    <div appMy>
      Doldur be meyhaneci, boş kalmasın kadehim...
    </div>

Bizler exportAs özelliği ile bu directive’i aşağıdaki gibi bir değişkene atayabilir ve bu atama neticesinde şablonda template reference olarak kullanabilir ve böylece directive’in member’larına doğrudan erişim sağlayabiliriz.

@Directive({
  selector: '[appMy]',
  standalone: true,
  exportAs: 'myDirective'
})

    <div appMy #div="myDirective" (click)="div.toggleColor()">
      Doldur be meyhaneci, boş kalmasın kadehim...
    </div>

Yukarıdaki çalışmaya dikkat ederseniz eğer oluşturulan directive’in selector’ı ile işaretlenmiş olan div nesnesi bir yandan da #div="myDirective" şeklinde bir ifadeyle de işaretlenmektedir. Burada #div template reference olarak tanımlanmış bir değişkendir, bu nedenle anlaşılacağı üzere istenilen bir isimle tanımlanabilir. myDirective ise directive’in exportAs özelliğine karşılık gelmektedir ve tanımladığımız template reference değişkenine ilgili directive’i atamamızı sağlamaktadır. Böylece artık template reference sayesinde ilgili directive’in member’larına doğrudan erişebilme imkanı elde edilmektedir. Haliyle bu nedenden dolayı (click)="div.toggleColor()" ifadesinde görüldüğü üzere referans değişkeni üzerinden directive içerisindeki metoda şablonda erişim gösterilip, kullanılabilmiştir.

İşte exportAs özelliği bu işe yaramakta ve özellikle ihtiyaç durumlarında oldukça efektif çözümler sağlamamıza imkan tanımaktadır.

Şimdi incelediğimiz bu özelliğin component’ler üzerindeki benzer etkisini de gözlemleyerek içeriğimizi noktalayalım.

Misal olarak aşağıdaki component’i ele alalım;

@Component({
  selector: 'app-my',
  standalone: true,
  template: `
    <div>
      <h2>{{title}}</h2>
      <button (click)="changeTitle()">Change Title</button>
    </div>
  `
})
export class MyComponent {
  title = 'Initial Title';

  changeTitle() {
    this.title = 'Title Changed';
  }
}

Normal şartlarda bu component’i selector üzerinden aşağıdaki gibi kullanabiliriz;

<app-my></app-my>

Ya da exportAs özelliği sayesinde aşağıdaki gibi daha esnek bir şekilde de kullanabiliriz;

@Component({
  selector: 'app-my',
  standalone: true,
  exportAs: 'myComponent',
  .
  .
  .
})

    <app-my #myComponent="myComponent"></app-my>

    <button (click)="myComponent.changeTitle()">Change Title from Outside</button>

İşte bu kadar 🙂

İtiraf etmeliyim ki, basit ama oldukça etkili bir özellik 🙂 Nasıl olduysa bu güne kadar gözden kaçırdığım bu özelliği üzerinde odaklandığım projelerin ihtiyaç noktalarında kullanmak için sabırsızlanıyorum 🙂

İlgilenenlerin faydalanması dileğiyle…
Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…