Bu yazıda, Angular’da olayları nasıl yakalayacağınıza, kullanıcı etkileşimlerini nasıl dinleyeceğinize ve bu etkileşimlere nasıl yanıt vereceğinize dair bilgiler vereceğim.
1. Temel Event Binding
Angular’da bir olayı yakalamanın en yaygın yöntemi, olay bağlama (event binding) kullanmaktır. Bu, bir DOM olayını bir bileşen yöntemine bağlar.
Örnek: Bir buton tıklanırsa bir fonksiyonun çalışmasını istiyorsanız:
|
1 2 3 |
<button (click)="onButtonClick()">Tıkla Beni!</button> |
|
1 2 3 4 5 6 7 |
export class AppComponent { onButtonClick() { console.log("Buton tıklandı!"); } } |
Çıktı: Konsolda “Buton tıklandı!” mesajını göreceksiniz.
2. $event Nesnesi
Bir olay tetiklendiğinde, Angular bu olayla ilgili bilgilere erişebilmek için $event nesnesini otomatik olarak metodumuza aktarır.
Örnek 1: Tıklanan bir butonun değerini göstermek:
|
1 2 3 |
<button (click)="onButtonClick($event)">Tıkla Beni!</button> |
|
1 2 3 4 5 6 7 |
export class AppComponent { onButtonClick(event) { console.log(event.target.innerText); } } |
Çıktı: Konsolda “Tıkla Beni!” mesajını göreceksiniz.
Örnek 2: $event nesnesini ve başka bir parametreyi aynı fonksiyona göndermek:
Bir butonun tıklanmasını yakalamak ve bu tıklamayla birlikte hem olay nesnesini ($event) hem de başka bir parametreyi (örneğin bir metin) fonksiyona göndermek istiyorsanız, bu şu şekilde yapılır:
|
1 2 3 |
<button (click)="onButtonClick($event, 'Merhaba Angular!')">Tıkla ve Mesajı Gör!</button> |
|
1 2 3 4 5 6 7 8 |
export class AppComponent { onButtonClick(event, message: string) { console.log(event.target.innerText); console.log('Gönderilen mesaj:', message); } } |
Çıktı: Konsolda sırasıyla “Tıkla ve Mesajı Gör!” ve “Gönderilen mesaj: Merhaba Angular!” mesajlarını göreceksiniz.
Bu yöntemle, bir olay dinleyiciye hem $event nesnesini hem de başka parametreleri aynı anda gönderebilirsiniz. Bu, kullanıcı etkileşimlerine dayalı olarak ekstra bilgilerle işlem yapmak istediğinizde oldukça kullanışlıdır.
3. Farklı Olay Türleri
click dışında, birçok farklı olay türüyle karşılaşabilirsiniz:
input: Bir input alanında değişiklik olduğunda tetiklenir.
|
1 2 3 |
<input (input)="onInputChange($event)"> |
keyup veya keydown: :Klavye tuşlarına basıldığında veya bırakıldığında tetiklenir.
|
1 2 3 |
<input (keyup)="onKeyup($event)"> |
mouseenter ve mouseleave: Fare bir öğenin üzerine geldiğinde veya ayrıldığında tetiklenir.
|
1 2 3 4 5 |
<div (mouseenter)="onMouseEnter()" (mouseleave)="onMouseLeave()"> Fareyle üzerime gel! </div> |
Ve daha birçok olay türü bulunuyor.
4. Event Filtering
Bazen sadece belirli tuşlara basıldığında bir olayı yakalamak isteyebilirsiniz. Örneğin, sadece “Enter” tuşuna basıldığında bir işlem yapmak:
|
1 2 3 |
<input (keyup.enter)="onEnter()"> |
Bu kod, yalnızca “Enter” tuşuna basıldığında onEnter() fonksiyonunu tetikler.
5. Template Reference Variables
Bir şablondaki bir öğeyi başka bir öğede dinlemek için şablon referans değişkenleri oluşturabilirsiniz.
|
1 2 3 4 |
<input #inputElement> <button (click)="onButtonClick(inputElement.value)">Gönder</button> |
Bu örnekte, butona tıklanırsa, onButtonClick() fonksiyonuna input elemanının değeri gönderilir.
Umarım “Angular Events: Olayları Dinlemek ve Yönetmek” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
Angular Directives: Yapısal Direktifler ve Özellik Direktifleri
Yeni bir yazımda görüşmek üzere.
Happy coding!
