Yükleniyor...

Template Syntax Referansı

Template Syntax Referansı, Angular geliştirme sürecinde bileşenlerin şablonları ile etkileşim kurmak için kullanılan temel bir rehberdir. Bu referans, interpolasyon, veri bağlama (tek yönlü ve çift yönlü), yapısal direktifler (ngIf, ngFor), şablon değişkenleri (#var) ve olay bağlamaları gibi Angular’ın şablon söz dizimi özelliklerini detaylı olarak açıklamaktadır. Modern SPA projelerinde veri akışını, bileşen durumu yönetimini ve lifecycle hook’ları etkili şekilde yönetebilmek için bu referans kritik öneme sahiptir.
Template Syntax Referansı kullanımı, geliştiricilerin bileşenleri yeniden kullanılabilir ve modüler bir şekilde tasarlamasına, gereksiz yeniden render’lardan kaçınmasına ve prop drilling sorununu önlemesine yardımcı olur. Bu içerik, okuyuculara Angular bileşenlerinin şablonları ile veri etkileşimini nasıl güvenli ve optimize bir şekilde gerçekleştireceklerini gösterecek, aynı zamanda performans ve güvenlik en iyi uygulamalarını öğretecektir.
Bu rehberde, örnekler üzerinden pratik uygulamalar gösterilerek şablon söz diziminin gerçek dünya Angular projelerindeki yeri ve önemi vurgulanmaktadır. Öğrenenler, şablonlar aracılığıyla veri akışını, event handling’i ve lifecycle yönetimini ileri düzeyde anlayacak ve karmaşık uygulamalarda bile temiz ve sürdürülebilir kod yazma yetkinliği kazanacaktır.

Temel Örnek

typescript
TYPESCRIPT Code 
import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
selector: 'app-sayac',
template: `       <h2>Basit Sayaç</h2>       <p #sayacGoster>{{ sayac }}</p>       <button (click)="arttir()">Artır</button>
`
})
export class SayacComponent {
sayac: number = 0;

@ViewChild('sayacGoster', { static: true }) goster!: ElementRef<HTMLParagraphElement>;

arttir() {
this.sayac++;
console.log('Güncel sayaç değeri:', this.goster.nativeElement.textContent);
}
}

Bu temel örnek, SayacComponent bileşenini gösterir. Şablon değişkeni #sayacGoster, @ViewChild ile DOM öğesine güvenli erişim sağlar. {{ sayac }} interpolasyonu, bileşen state’ini şablona bağlayarak tek yönlü veri akışını örnekler.
Artırma butonuna tıklandığında arttir() metodu state’i günceller ve DOM içeriğini konsola yazdırır. Bu yapı, prop drilling sorununu önler ve gereksiz render’ları engeller. Bu örnek, yeniden kullanılabilir bileşenler oluşturma, lifecycle yönetimi ve event binding konularının temelini öğretir.

Pratik Örnek

typescript
TYPESCRIPT Code 
import { Component, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
selector: 'app-mesaj',
template: `       <div #mesajKutusu class="mesaj-kutusu">{{ mesaj }}</div>
`,
styles: ['.mesaj-kutusu { padding: 10px; border: 1px solid #ccc; margin-top: 10px; }']
})
export class MesajComponent implements AfterViewInit {
@Input() mesaj: string = '';
@ViewChild('mesajKutusu') kutu!: ElementRef<HTMLDivElement>;

ngAfterViewInit() {
console.log('Gösterilen mesaj:', this.kutu.nativeElement.textContent);
}
}

@Component({
selector: 'app-root',
template: `       <h1>Mesaj Uygulaması</h1>       <app-mesaj [mesaj]="kullaniciMesaji"></app-mesaj>       <input [(ngModel)]="kullaniciMesaji" placeholder="Mesaj yazın" />
`
})
export class AppComponent {
kullaniciMesaji: string = 'Angular’a Merhaba!';
}

Advanced Angular Implementation

typescript
TYPESCRIPT Code 
import { Component, ViewChild, ElementRef, ChangeDetectionStrategy, AfterViewInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Component({
selector: 'app-ileri-sayac',
template: `       <h2>İleri Düzey Sayaç</h2>       <p #goster>{{ sayac$ | async }}</p>       <button (click)="arttir()">Artır</button>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class IleriSayacComponent implements AfterViewInit {
private sayacSubject = new BehaviorSubject<number>(0);
sayac$ = this.sayacSubject.asObservable();

@ViewChild('goster') goster!: ElementRef<HTMLParagraphElement>;

arttir() {
this.sayacSubject.next(this.sayacSubject.value + 1);
}

ngAfterViewInit() {
console.log('Başlangıç sayacı:', this.goster.nativeElement.textContent);
}
}

Bu ileri düzey örnek, state yönetimi için reaktif BehaviorSubject, performans için OnPush ChangeDetection stratejisi ve güvenli DOM erişimi sağlar. Bu yöntemler gereksiz render’ları engeller ve prop drilling sorununu azaltır. Angular DevTools ile debug yapılabilir, state değişiklikleri ve lifecycle hook’lar kolayca izlenebilir. Verilerin DOM’a güvenli aktarımı, güvenlik açısından da önemlidir.

📊 Kapsamlı Referans

Angular Element/Method Description Syntax Example Notes
template reference variable Yerel öğelere erişim #degisken <input #kullanici /> @ViewChild ile erişilebilir
@ViewChild Tek öğeye erişim @ViewChild('degisken') degiskenEl @ViewChild('kullanici') inputEl static: true/false
@ViewChildren Birden fazla öğeye erişim @ViewChildren('degisken') elems @ViewChildren('item') items QueryList döner
ngIf Koşullu render *ngIf="kosul" <div *ngIf="goster"></div> DOM kontrolü
ngFor Liste render *ngFor="let item of items" <li *ngFor="let i of liste">{{i}}</li> trackBy ile optimize edilebilir
ngClass Dinamik sınıf [ngClass]="{'aktif': durum}" <div [ngClass]="{'aktif': true}"></div> Object/Array/String
ngStyle Dinamik stil [ngStyle]="{'color': renk}" <p [ngStyle]="{'font-size.px': boyut}"></p> Inline CSS
@Input Parent→Child veri @Input() prop @Input() mesaj:string; Data binding
@Output Child→Parent veri @Output() event = new EventEmitter() @Output() degisti = new EventEmitter<number>() EventEmitter
ngModel İki yönlü binding [(ngModel)]="deger" <input [(ngModel)]="kullanici" /> FormsModule gerekli
AfterViewInit Lifecycle hook ngAfterViewInit() ngAfterViewInit() {…} View render sonrası
ChangeDetectionStrategy Default/OnPush Default ChangeDetection yönetimi Performans optimizasyonu
BehaviorSubject Reaktif state new BehaviorSubject(initial) sayac$ = new BehaviorSubject(0) Observable ve başlangıç değeri

📊 Complete Angular Properties Reference

Property Values Default Description Angular Support
static true/false false @ViewChild başlatma Angular 8+
read ElementRef/TemplateRef/Component ElementRef Inject edilecek tip Angular 8+
trackBy Function undefined ngFor optimizasyonu Angular 2+
changeDetection Default/OnPush Default Change detection stratejisi Angular 2+
encapsulation Emulated/None/ShadowDom Emulated CSS kapsülleme Angular 2+
providers Array [] DI servisleri Angular 2+
animations Array [] Component animasyonları Angular 4+
interpolation Array ['{{','}}'] Interpolasyon işaretleri Angular 2+
preserveWhitespaces true/false true Boşluk koruma Angular 2+
outputs Array [] Component eventleri Angular 2+
inputs Array [] Component girişleri Angular 2+
host Object {} Host bindings/listeners Angular 2+

Template Syntax Referansı, Angular bileşenlerinin şablonları ile veri etkileşimi ve lifecycle yönetimini öğrenmek için kritik bir kaynaktır. Bu bilgileri uygulayarak, geliştiriciler daha performanslı, güvenli ve yeniden kullanılabilir bileşenler oluşturabilir. Bir sonraki adım olarak Angular servisleri, RxJS ile state yönetimi, gelişmiş form uygulamaları ve performans optimizasyonu konularında derinleşmek faydalıdır. Pratik projelerde bu referansı uygulamak öğrenmeyi pekiştirir ve profesyonel Angular geliştirme becerilerini güçlendirir.

İlgili Arama Terimleri

Kullanıcılar bu içeriği bu terimlerle de araştırıyor:

template syntax referansı angular angular template reference angular ViewChild örneği ngIf ngFor kullanım örneği angular veri binding çift yönlü binding angular bileşen state yönetimi angular lifecycle hook angular performans optimizasyonu angular angular SPA bileşenleri prop drilling önleme angular ngModel formları angular rxjs reaktif state angular ChangeDetectionStrategy OnPush angular angular ileri direktifler

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
4
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 1 / 1
Angular Ders