Olay Yönetimi

Olay yönetimi, web uygulamalarında etkileşimli özellikleri mümkün kılar. Geliştirici olarak buton tıklamaları, form gönderimleri ve daha fazlası gibi kullanıcı eylemlerine yanıt verme imkanı sağlar.

NOTE: Temel bilgiler kılavuzundaki kullanıcı etkileşimini yönetme hakkında daha fazla bilgi edinin.

Bu aktivitede, bir olay yöneticisi eklemeyi öğreneceksiniz.

Angular'da olaylara parantez sözdizimi () ile bağlanırsınız. Belirli bir öğede, bağlanmak istediğiniz olayı parantez içine alın ve bir olay yöneticisi ayarlayın. Bu button örneğini inceleyin:

@Component({
  ...
  template: `<button (click)="greet()">`
})
export class App {
  greet() {
    console.log('Hello, there 👋');
  }
}

Bu örnekte, butona her tıklandığında greet() fonksiyonu çalışacaktır. greet() sözdiziminin sondaki parantezleri içerdiğine dikkat edin.

Pekala, şimdi sıra sizde:

  1. Bir olay yöneticisi ekleyin

    App sınıfına showSecretMessage() olay yöneticisi fonksiyonunu ekleyin. Uygulama olarak aşağıdaki kodu kullanın:

    showSecretMessage() {
  this.message = 'Way to go 🚀';
}

  2. Şablon olayına bağlayın

    app.ts dosyasındaki şablon kodunu, section öğesinin mouseover olayına bağlanacak şekilde güncelleyin.

    <section (mouseover)="showSecretMessage()">

Birkaç adımda Angular'da ilk olay yöneticinizi oluşturdunuz. Bu işte oldukça iyi oluyorsunuz gibi görünüyor, harika çalışmaya devam edin.