Angular’da, şablonlarda (template) HTML’yi dinamik bir şekilde değiştirmenizi sağlayan özel işaretleme yapılarına direktifler denir. Direktifler, bileşenlerin aksine bir şablon veya HTML etiketi oluşturmazlar; bunun yerine mevcut DOM elemanları üzerinde değişiklik yaparlar veya etkileşimde bulunurlar. Angular’da genellikle iki ana kategori direktif vardır: Yapısal Direktifler (Structural Directives) ve Özellik Direktifleri (Attribute Directives).
1. Yapısal Direktifler (Structural Directives)
Yapısal direktifler, DOM’un yapısnı değiştirirler. Yani elemanları ekler, kaldırır veya değiştirirler.
ngIf Direktifi
Bu direktif, bir koşula bağlı olarak bir elemanın gösterilip gösterilmeyeceğini kontrol eder.
Örnek:
|
1 2 3 |
<p *ngIf="showMessage">Merhaba, Angular!</p> |
Eğer showMessage değeri true ise paragraf DOM’da yer alır; false ise DOM’dan kaldırılır.
|
1 2 3 4 5 |
export class DemoComponent { showMessage = true; } |
ngFor Direktifi
Listeleri veya koleksiyonları döngü ile göstermek için kullanılır.
Örnek:
|
1 2 3 4 5 |
<ul> <li *ngFor="let item of items; let i = index;">{{ i }} {{ item }}</li> </ul> |
|
1 2 3 4 5 |
export class DemoComponent { items = ['Elma', 'Muz', 'Kiraz']; } |
Çıktı:
- 0 Elma
- 1 Muz
- 2 Kiraz
ngSwitch Direktifi
Bir değişkenin değerine göre farklı şablon parçalarını şartlı olarak görüntülemek için kullanılır. Temelde birçok if-else durumunu ele almanıza olanak tanır, bu nedenle şablonunuzu daha düzenli ve okunabilir kılar.
Örnek:
|
1 2 3 4 5 6 7 8 |
<div [ngSwitch]="fruitName"> <p *ngSwitchCase="'Elma'">Bu bir elma!</p> <p *ngSwitchCase="'Muz'">Bu bir muz!</p> <p *ngSwitchCase="'Kiraz'">Bu bir kiraz!</p> <p *ngSwitchDefault>Bilinmeyen meyve!</p> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 |
import { Component } from '@angular/core'; @Component({ //... selector, templateUrl, vb. }) export class SwitchComponent { fruitName = 'Elma'; } |
Bir div elementi içinde “Bu bir elma!” yazısı gösterilir, çünkü fruitName değeri ‘Elma‘dır. Eğer fruitName değeri ‘Muz’ veya ‘Kiraz’ olsaydı, ilgili mesajlar gösterilirdi. Eğer fruitName bu üç değerden farklı bir değere sahip olsaydı, “Bilinmeyen meyve!” mesajı gösterilirdi.
ngSwitch yapısal direktifi, özellikle bir değişkenin alabileceği birçok farklı değeri ele almanız gerektiğinde oldukça kullanışlıdır. Bu sayede, her bir değer için ayrı ayrı *ngIf kullanmanıza gerek kalmaz, bu da şablonunuzu daha temiz ve yönetilebilir hale getirir.
ngTemplateOutlet Direktifi
ngTemplateOutlet direktifi, bir ng-template içinde tanımlanan şablonu, istediğiniz yerde dinamik olarak göstermenizi sağlar. Bu, karmaşık UI bileşenleri oluştururken veya şablonları tekrar kullanırken oldukça kullanışlıdır.
Örnek:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ng-template #myTemplate let-name> <p>Meyvenin adı: {{name}}</p> </ng-template> <div> <ng-container *ngTemplateOutlet="myTemplate; context: { $implicit: 'Elma' }"></ng-container> </div> <div> <ng-container *ngTemplateOutlet="myTemplate; context: { $implicit: 'Muz' }"></ng-container> </div> |
#myTemplate ile tanımlanan bir şablon oluşturduk. Bu şablon, dışarıdan veri almak için bir “let-name” değişkeni kullanır.
Daha sonra ngTemplateOutlet ile bu şablonu iki farklı div içinde tekrar kullandık. Her bir kullanımda, context özelliği ile şablona farklı bir değer (bu örnekte farklı meyve adları) ilettiğimizi görebilirsiniz.
ngTemplateOutlet kullanımı, karmaşık Angular uygulamalarında şablonları modüler ve tekrar kullanılabilir hale getirmek için oldukça kullanışlıdır.
Çıktı:
Birinci div içinde “Meyvenin adı: Elma” ve ikinci div içinde “Meyvenin adı: Muz” yazıları gösterilir.
ngContainer Direktifi
ngContainer direktifi, Angular’da DOM’a eklenmeyen bir gruplama elemanı oluşturmak için kullanılır. Temelde, yapısız bir HTML elemanıdır ve çıktıda görünmez. Genellikle, yapısal direktifleri (örneğin, ngIf, ngFor vb..) uygulamak için bir “görünmez konteyner” olarak kullanılır, özellikle birkaç DOM elemanını gruplama ihtiyacı olduğunda kullanışlıdır.
Örnek:
|
1 2 3 4 5 6 7 8 |
<div> <ng-container *ngIf="showMessage"> <h1>Başlık</h1> <p>Açıklama metni</p> </ng-container> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 |
import { Component } from '@angular/core'; @Component({ //... selector, templateUrl, vb. }) export class NgContainerComponent { showMessage = true; } |
ngContainer direktifi, DOM’da ekstra bir elemana ihtiyaç duymadan, yapısal direktifleri gruplandırma ihtiyacını karşılar.
2. Özellik Direktifleri (Attribute Directives)
Özellik direktifleri, bir elemanın özelliklerini veya davranışlarını değiştirmek için kullanılır, ancak DOM yapısını değiştirmezler.
ngStyle Direktifi
İşlem sonuçlarına göre stil özelliklerini dinamik olarak ayarlamak için kullanılır.
Örnek:
|
1 2 3 |
<div [ngStyle]="{'color': textColor, 'background-color': bgColor}">Merhaba Dünya!</div> |
|
1 2 3 4 5 6 |
export class StyleComponent { textColor = 'blue'; bgColor = 'yellow'; } |
ngClass Direktifi
Sınıf adlarını dinamik olarak eklemek veya çıkarmak için kullanılır. Belirli bir şarta bağlı olarak sınıf eklemek veya çıkarmak için oldukça kullanışlıdır.
Örnek:
|
1 2 3 |
<div [ngClass]="{'active': isActive, 'disabled': isDisabled}">Örnek İçerik</div> |
|
1 2 3 4 5 6 |
export class ClassComponent { isActive = true; isDisabled = false; } |
ngModel Direktifi
İki yönlü veri bağlama için kullanılır. Yani bir form elemanının değeri ile bir bileşen özelliği arasında otomatik senkronizasyon sağlar. Genellikle formlarda kullanılır.
Örnek:
|
1 2 3 4 |
<input [(ngModel)]="userName"> <p>Mesajınız: {{userName}}</p> |
|
1 2 3 4 5 6 7 8 9 10 11 |
import { Component } from '@angular/core'; @Component({ //... selector, templateUrl, vb. }) export class ModelComponent { userName = ''; } |
Kullanıcı input alanına bir şeyler yazdığında, userName özelliği otomatik olarak güncellenir ve aynı değer <p> etiketinde de gösterilir.
ngValue Direktifi
ngValue direktifi, form elemanlarına (genellikle select içindeki optionlar için) bir değer atanmasında kullanılır. Bu direktif, basit stringlerden daha karmaşık veri tiplerini (örneğin, nesneler veya diziler) form elemanlarına atamak için kullanışlıdır.
Bir select elementinin seçeneklerini doldururken, her bir option için hem bir etiket (kullanıcının gördüğü) hem de bir değer (kod tarafında kullanılan) tanımlamak gerekebilir.
Örnek:
|
1 2 3 4 5 6 |
<select [(ngModel)]="selectedFruit"> <option *ngFor="let fruit of fruits" [ngValue]="fruit">{{fruit.name}}</option> </select> <p>Seçilen meyve: {{selectedFruit?.name}}</p> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { Component } from '@angular/core'; @Component({ //... selector, templateUrl, vb. }) export class ValueComponent { fruits = [ {id: 1, name: 'Elma'}, {id: 2, name: 'Muz'}, {id: 3, name: 'Kiraz'} ]; selectedFruit = this.fruits[0]; // Başlangıçta Elma seçili olsun } |
Kullanıcı bir seçenek seçtiğinde, bu seçilen değer selectedFruit özelliğine atanır ve ekranda gösterilir.
Bu yaklaşım, form elemanlarının değerlerinin basit stringlerden daha karmaşık veri tipleri olması gereken durumlarda oldukça kullanışlıdır.
ngModelOptions Direktifi
Angular’ın form elemanlarındaki değer değişikliklerini nasıl işlediğini özelleştirmek için kullanılır. Örneğin, kullanıcının bir input alanına her tuş vuruşunda değer güncellemesi yerine, belirli bir gecikme sonrasında veya input alanının odak dışı olduğunda güncelleme yapmasını isteyebilirsiniz.
Örnek:
|
1 2 3 4 |
<input [(ngModel)]="username" [ngModelOptions]="{ updateOn: 'blur' }"> <p>Kullanıcı Adı: {{username}}</p> |
|
1 2 3 4 5 6 7 8 9 10 11 |
import { Component } from '@angular/core'; @Component({ //... selector, templateUrl, vb. }) export class ModelOptionsComponent { username = ''; } |
Kullanıcı input alanına değer girdiğinde, değer anında güncellenmez. Ancak kullanıcı input alanından odaklandığında (örneğin, başka bir yere tıkladığında), “Kullanıcı Adı:” başlığı altındaki değer güncellenir.
Sonuç olarak yapısal direktiflerle DOM üzerinde doğrudan değişiklikler yapabilir, özellik direktifleriyle de elementlerin özelliklerini ve davranışlarını kişiselleştirebilirsiniz. Bu direktifler, geliştirme sürecini hızlandırır, kodun okunabilirliğini ve bakımını kolaylaştırır.
Umarım “Angular Directives: Yapısal Direktifler ve Özellik Direktifleri” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
Angular Data Binding: Tek Yönlü ve Çift Yönlü Veri Bağlama
Yeni bir yazımda görüşmek üzere.
Happy coding!
