Angular Two-way Data Binding ve Template Reference

Bu yazımızda two-way data binding i inceleyceğiz. html ve ts dosyalarımız aşağıda göründüğü gibidir.

ngModel

FormsModule ü app.module.ts dosyamıza ekleyelim.

FormsModule sayesinde Angular ngModel özelliğini kullanarak two-way data binding yapanbiliriz.

app.component.html dosyamıza bir input ekleyelim.

<input type="text" />

app.component.ts dosyamızda model imizi tanımlayalım.

export class AppComponent {
    name: string;
}

name isimli bir property oluşturdum.input elementimize ngModel i ekleyelim.

<input type="text" [(ngModel)]="name" />

[(ngModel)] aynı anda iki işlem yapmaktadır. Adım adım inceleyelim.

<input type="text" [ngModel]="name" />

Yukarıda görüldüğü gibi parantez ()olmadan sadece köşeli parantez []ile tanımladıımızda input elementimizi value property si app.component.ts içerisinde bulunan name property sine eşitlenir. Ancak input içerisine yeni değer girdiğimizde name property si değiştirilmez. Bu şekilde one-way data binding yapmış oluruz.

Parantez () kullanarak sadece data binding değil, event binding de yapmış oluruz. Böylece app.component.ts içerisinde bulunan name property de değişmiş olur.

input elementimizi tekrar eski haline getirelim.

<input type="text" [(ngModel)]="name" />

html içerisine bir tanediv ekleyelim.

<input type="text" [(ngModel)]="name" />
<div> 
    {{ name }}
</div>

div içerisine name property sini yazdırdık. Tarayıcıdan baktığımızda input değeri değiştiğinde div içerisinde bulunan yazı da değişmektedir.

Template Reference Variables

app.component.ts içerisinde bulunan FormsModule ve html içerisinde bulunan ngModel tanımlamalarını silelim.

input elementimize template reference ekleyelim.

<input type="text" #nameInput />
<div> 
    {{ name }}
</div>

HTML içerisinde her elemente # ile bir tanımlama yapabiliriz ve buna template reference denir. HTML içerisinde bir değişken oluşturduğumuzu da düşünebiliriz.

app.component.html içerisine bir buton ekleyelim.

<input type="text" #nameInput /> 
<button>Tamam</button>
<div> 
    {{ name }}
</div>

button a tıkladığımızda input değerini bir metoda gönderlim. Bunun için app.component.ts içerisinde bir metod oluşturalım.

export class AppComponent {
    name: string = "Volkan"; 
    handleGetValue(value: string): void{}
}

handleGetValue isimli bir metod oluşturdum ve içerisine value adında string tipinde parametre alıyor.

Gelen parametremizi name property sine eşitleyelim.

export class AppComponent {
    name: string = "Volkan"; 
    handleGetValue(value: string): void{ 
        this.name = value;
    }
}

button a tıkladığımızda metodumuzu çalıştıralım.

<input type="text" #nameInput /> 
<button (click)="handleGetValue()" >Tamam</button>
<div> 
    {{ name }}
</div>

handleGetValue metoduna parametre olarak input değerini göndermeliyiz. Oluşturduğumuz nameInput isimli template reference artık input elementimizdir.

<input type="text" #nameInput /> 
<button (click)="handleGetValue(nameInput.value)" >Tamam</button>
<div> 
    {{ name }}
</div>

Metod içerisine nameInput.value ile input elementin değerini gönderebiliriz. Tarayıcıya baktığımızda div içerisinde bulunan yazının button click den sonra input değere eşitlendiğini görebiliriz.

Sonraki konumuz Angular ngIf, ngFor ve ngTemplate olacaktır.