Bu yazımızda HTML içerisinde bulunan elementlere event binding yapmayı ve two-way data binding konusunu inceleyeceğiz.

Yine app.component.ts ve app.component.html üzerinde çalışacağız.

HTML içerisinde bir input oluşturalım.

<input type="text"/>

ts dosyamızın içerisinde name adında bir property oluşturalım. dilerseniz name property si için başlangıç değeri verebiliriz.

export class AppComponent { 
name: string = "Volkan";
}

input elementimizin value property sini name e eşitleyelim.

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

Buraya kadar yaptıklarımızı Property Binding yazısında incelemiştik.

Event Binding

input elementimize ekleyeceğimiz event i oluşturalım. Bunun için AppComponent class ı içerisine bir metot yazıyorum.

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

handleKeyup isimli bir metod oluşturdum. Metodumuz içerisine event adında bir parametre alsın.

export class AppComponent { 
name: string = "Volkan";
handleKeyup(event: any): void{}
}

event parametremizin tipini any olarak belirledim. Gelen parametreyi console da görüntüleyelim.

export class AppComponent { 
name: string = "Volkan";
handleKeyup(event: any): void{
console.log(event);
}
}

HTML bölümüne geçelim ve bu metodumuzu input elementine ekleyelim.

<input type="text" [value]="name" (keyup)="handleKeyup()" />

HTML elementlerin PlainJS içerisinde bulunan tüm event larına Angular içerisinde () ile erişebiliriz. Yukarıda görüldüğü gibi elemente () ile event adını veriyoruz ve eklediğimiz metoda eşitliyoruz.

Metodumuz parametre alıyorsa $event ile parametreyi gönderebiliriz.

<input type="text" [value]="name" (keyup)="handleKeyup($event)" />

Tarayıcıda input elementinin içeriğini değiştirdiğimizde console bölümünde çıktıyı görebiliriz.

Console bölümünde gösterilen KeyboardEvent içerisine baktığımızda:

target: input nesnesini görebiliriz. Bu ensne içerisinde ise value değeri vardır.

Şimdi HTML içerisine bir element daha ekleyelim ve AppComponent ın property si olan name in değerini içerisine yazdıralım.

<input type="text" [value]="name" (keyup)="handleKeyup($event)" />
<div>
{{ name }}
</div>

input değerini değiştirdiğimiz zaman div içerisinde bulunan name değişmemektedir. Çünkü input un sadece value su değişmektedir.

name in içeriğini değiştirelim. Metodumuza bir satır ekeleyeceğiz.

export class AppComponent { 
name: string = "Volkan";
handleKeyup(event: any): void{
this.name = event.target.value;
console.log(event);
}
}

Böylece name değeri de değişiyor ve HTML de bulunan div içeriği güncelleniyor. Burada keyup event yerine Angular da bulunan input event kullanılabilir.

<input type="text" [value]="name" (input)="handleKeyup($event)" />
<div>
{{ name }}
</div>

Sonuç yine aynı olacaktır. Ancak keyup event in bir özelliği vardır, bunu input event ile kullanamayız. HTML i biraz değiştirelim.

<input type="text" [value]="name" (keyup.enter)="handleKeyup($event)" />
<div>
{{ name }}
</div>

keyup.enter ifadesi ekledim. Bunun anlamı, enter tuşuna basıldığında handleKeyup eventi çalıştır demektir.

Yaptığımız işlemler two-way data binding e benzemektedir ama değil. Sadece event kullanarak two-way data binding i simule etmeye çalıştık.

En çok kullanılan event lardan birisi click tir. Bir buton oluşturalım.

<input type="text" [value]="name" (keyup.enter)="handleKeyup($event)" />
<div>
{{ name }}
</div>
<button>Temizle</button>

Temizle işlemini yapacak metodumuzu yazalım.

export class AppComponent { 
name: string = "Volkan";
handleKeyup(event: any): void{
this.name = event.target.value;
console.log(event);
}
handleClear(): void{
this.name = "";
}

}

input un value property sini ve div içeriğini AppComponent in name property sine eşitlemiştik. Dolayısıyla AppComponent in name property si değiştiğinde hem input un value property si hem de div içeriği değişecektir. Bu yüzden handleClear içerisinde name property sini boş string e eşitleyebiliriz.

handleClear metodumuzu butona click event olarak ekleyelim.

<input type="text" [value]="name" (keyup.enter)="handleKeyup($event)" />
<div>
{{ name }}
</div>
<button (click)="handleClear()">Temizle</button>

Sonraki konumuz Two-way data binding ve template reference olacaktır.

Front end developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store