Angular Attribute Directive Nedir ve Nasıl Custom Attribute Directive Oluşturulur

Angular Attribute Directive Nedir?

Angular Eğitim Serisine “Angular Attribute Directive Nedir?” konulu yazı ile devam edeceğim. Bir önceki yazımda “Angular Structural Directive Nedir” konulu yazıyı paylaştım.

Bu yazımda Angular Attribute Directive’ler ile DOM yapılarını nasıl manupule edeceğimizi, Angular ile nasıl custom attribute directive oluşturacağımızı anlatacağım. Bu directive’i uygulama içerisinde kullanıp, bolca kod örnekleri paylaşacağım.

Angular Eğitim Seti ile alakalı yazıların tamamına buradan ulaşabilirsiniz.

Keyifli okumalar 🙂

Angular Attribute Directive

Önceki yazılarımda genel olarak directive’lerin işlevlerinden, neden kullanıldıklarından bahsetmiştim. Attribute Directive’ler de özetle Dom nesnelerini manipule etmeyi ve işlevlerini yönetmeyi sağlayan yapılardır.

Structural Directive’ler ile aralarındaki farklara bakacak olursak;

Attribute Directive

  • Attribute directive’ler bir ögenin görünüşünü ve davranışını değiştirmek için kullanılırlar.
  • Bir element üzerine farklı birden fazla Attribute Directive uygulanabilir.
  •  Ex : ngStyle , ngClass

Structural Directive

  • Structural Directiveler Html Layout’undan sorumludur. Elemanlar ekleyerek, kaldırarak veya değiştirerek DOM’nun yapısını şekillendirir ve değiştirirler.
  • Element üzerine yalnızca bir Structural Directive uygulanabilir.
  • Ex : *ngIf , *ngFor

Angular ile hazır olarak kullanılabilir olan Attribute Directive’ler;

NgStyle

NgStyle Directive, DOM elementlerinin style property’sini yönetmemize olanak tanır.

Ya da bu directive sayesinde expression yazarak da elementin style özelliğini manipule edebilirsiniz;

Bu örnekte person diye bir nesnemizin olduğunu ve bu nesnenin city property’si olduğunu düşünererk expression’ı geliştirdik. Eğer person.city = “Manisa” değişkenine sahip ise green değil ise background-color özelliğinin red değerini almasını sağladık ve bunu kolayca geliştirdik. Directive’ler hayat kurtarır. 🙂

Basit bir component oluşturarak daha anlaşılır hale getirelim;

ngstyle.component.html

ngstyle.component.ts

ve çıktı;

ngstyle angular directive preview

NgClass

NgClass Directive, NgStyle Directive’ine çok benzer bir şekilde, DOM elementlerinin class property’sini yönetmemize olanak tanır.

ngclass.component.html

*ngFor Structural Directive’ini kullanarak people dizisi kadar li elementinin oluşmasını sağladık. Burada  “ngClass” Directive’i sayesinde condition ile dom elementinin class attribute’ünü yönetebildiğimiz için yukarıdaki gibi kodumuzu geliştirdik.

ngclass.component.css

ngclass.component.ts
ve çıktı;

ngclass angular directive preview

Görüdünüz gibi Directive kullanarak view tarafında dom nesnelerini bu şekilde yönetmek çok kolay 🙂 Şimdi biraz daha işi ileriye taşıyalım. Custom bir directive yazalım ve bunu uygulama içinde kullanalım.

Custom Angular Attribute Directive Oluşturma

Angular, @Directive decorator sayesinde custom directive’ler oluşturabilmemizi ve geliştirdiğimiz uygulamaların view katmanında çok kolay işler yapmamızı, kod tekrarlarından kurtulmamızı ve daha hızlı kod geliştirmemizi sağlıyor. Zaten bu kadar güçlü bir framework kullanıyor iseniz, uygulamanızın ihityaçları doğrultusunda nimetlerinden de faydalanmak gerekir diye düşünüyorum. 🙂

Neyse konumuza dönelim. Angular CLI’dan yardım alarak,

syntax’ı ile directive oluşturabilirsiniz. Ben “highlight” adıyla bir directive oluşturdum ve aşağıdaki kodları ekledim.

Yukarıdaki gibi HighlightDirective sınıfı @Directive decorator ile işaretlendi. Aynı zamanda proje içinde kullanabilmek için app.module.ts içinde declarations listesine eklendi. selector: [appHighlight] sayesinde kullandığımız html içindeki elemente bu directive’i inject edeceğiz.

Biraz kodları açıklayalım;

constructor(private el: ElementRef) { }

ElementRef; Angular/Core paketi üzerinden gelir.  Directive sınıfı içinde ‘import { Directive, ElementRef, HostListener, Input } from ‘@angular/core’; ‘ ile bu özelliği kullanıyoruz ve constructor’da yukarıdaki gibi tanımladığımızda, directive’i inject ettiğimiz elementin bütün özelliklerine bu class sayesinde erişip yönetebilir durumda oluyoruz.

 

@Input() defaultColor: string;

Directive’in uygulandığı element üzerinden default rengi alabileceğimiz parametre.

 

@Input(‘appHighlight’) highlightColor: string;

Dikkat ederseniz @Input’un alias’ı, directive’de kullanacağımız selector (selector: ‘[appHighlight]’) ile aynı. Bu sayede directive elementi üzerinden HighlightDirective class’ı içine değişken alabileceğiz.

 

app.module.ts

Eğer Directive’i AppModule içindeki declarations listesi içinde tanıtmazsak ve directive’i uygulama içinde kullanırsak; Angular, runtime’da aşağıdaki gibi ‘Template parse error‘ hatası verecektir.

custom angular attribute directive preview

Devam edelim ve yeni bir component oluşturalım;

custom-directive.component.ts

custom-directive.component.html

app.module.ts

Run;

custom angular attribute directive preview 2

Demo ve kodlara buradan ulaşabilirsiniz;

Live Demo

Codes

Özet

Bu yazıda; Mobilhanem üzerinde yayımlamaya başladığım Angular Eğitim Seti yazı serisinden Angular Attribute Directive konusunu işledik. Angular içindeki hazırda bulunan bazı Attribute Directive çeşitlerinini örneklerle açıkladık. Nasıl Custom bir Attribute Directive oluşturacağımızdan ve uygulama içerisinde nasıl kullanacağımızdan bahsettik.

Eğer bir önceki Angular Structural Directive Nedir? konulu yazımı okumadıysanız konu bütünlüğü açısından okumanızı tavsiye ederim.

Bu yazınında sonuna geldik. Yorumlarınız benim için değerli. Yorumlarınızı bekliyorum. Bir sonraki yazımda görüşmek üzere. 🙂

Yararlı Linkler

https://angular.io/guide/attribute-directives

https://angular.io/api/common/NgStyle

https://angular.io/api/common/NgClass

https://angular.io/cli/generate

 

 

46

Hasan Denli

Yorum Yaz

Haftalık Bülten

Mobilhanem'de yayınlanan dersleri haftalık mail almak ister misiniz?