Şablonlar ve Veri Bağlama

Şablonlar, Angular'da dinamik içerik görüntülemenizi sağlar. Bu derste şablonların ve veri bağlamanın nasıl çalıştığı incelenmektedir.

Şablon Nedir?

Şablon, Angular'ın bir bileşenin görünümünü oluşturmak için kullandığı HTML'dir. Verileri görüntülemek için HTML'i Angular'a özgü sözdizimiyle birleştirir.

Araya Ekleme

Araya ekleme, bileşeninizdeki değerleri HTML içine yerleştirmenizi sağlar. Verileri göstermek için çift küme parantezi kullanın:

{{ data }}

{{ username }}

Özellik Bağlama

Özellik bağlama, HTML öğelerinin özelliklerini dinamik olarak ayarlamanızı sağlar:

[src] = "imageUrl"

<img [src]="user.profilePicture">

Olay Bağlama

Olay bağlama, uygulamanızın kullanıcı eylemlerine yanıt vermesini sağlar:

(click)="onClick()"

<button (click)="showAlert()">Click me</button>

Çift Yönlü Bağlama

Çift yönlü bağlama, kullanıcı arayüzünüz ile verilerinizin eşzamanlı kalmasını sağlar. [(ngModel)] kullanın:

<input [(ngModel)]="user.name">

Yapısal Yönergeler

Yapısal yönergeler, DOM düzenini değiştirir. *ngIf ve *ngFor bunlara örnektir.

<div *ngIf="isVisible">Visible Content</div>

ngFor Kullanımı

*ngFor, veriler üzerinde döngüye girer ve öğeleri art arda görüntüler:

<li *ngFor="let item of items">{{ item }}</li>

Özet

Dinamik Angular görünümleri oluşturmak için şablonları ve veri bağlamayı nasıl kullanacağınızı öğrendiniz!