Angular 4 – Event Binding

Merhaba,

Bu içeriğimizde Angular 4 kütüphanesinde Event Binding olgusunu inceliyor olacağız. Tabi web programlama yahut “front end” ile az çok ilgilenen her er kişinin yabancılık çekmeyeceği bir konuda olduğundan fazla detaya bulaşmadan ilgili kütüphanede olay işlemlerinin nasıl ceyran ettiğini irdeleyecek ve makalemizi sonlandıracağız.

O halde, hiç vakit kaybetmeden buyrun başlayalım…

Angular uygulamalarında aşağıdaki prototipte olduğu gibi event oluşturmaktayız.

<[HTML Nesnesi] (OLAY/EVENT)="İŞLEMLER/FONKSİYONLAR">

Yukarıdaki prototipi incelerseniz eğer olayların parantez içerisinde tanımlandığına dikkatinizi çekerim.
Şimdi aşağıdaki örnekleri inceleyiniz.

• import { Component } from '@angular/core';
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    ngClickFunction() {
      alert("Button is click");
    }
  }
  

  <button (click)="ngClickFunction()">Tıkla</button>
  

• import { Component } from '@angular/core';
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    ngTextRead(text: string) {
      alert(text);
    }
  }
  

  <button (click)="ngTextRead(txt1.value)">Tıkla</button>
  <input type="text" #txt1  />
  

  Burada butona tıklandığı zaman inputtaki değere “#txt1” etiketi sayesinde ulaşabilmekteyiz.

• import { Component } from '@angular/core';
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    ngTextWrite(text: string) {
      alert(text);
    }
  }
  

  <input type="text" #txt1 (change)="ngTextWrite(txt1.value)" />
  

Şuana kadar genel geçer event yapılarını ele aldığımızdan dolayı çokta üzerine durmaksızın direkt olarak yapısal açıdan iskeletini incelemiş bulunmaktayız. Haliyle yavaş yavaş event yapılarını Angular kütüphanesine özel biraz daha derinleştirmeye başlayalım…

Angular uygulamalarında olayları belirli filtrelere tabii tutarak bind edebilmekteyiz. Yani uzun lafın kısası filtreli olaylar oluşturabilmekteyiz.

Aşağıdaki kod bloğunu incelerseniz eğer;

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  text = "";
  onEnter(text: string) {
    this.text = text;
  }
}

<input #box (keyup.enter)="onEnter(box.value)">
<p>{{text}}</p>

“onEnter” eventı “enter” tuşuna basıldığı zaman tetiklenecektir.

Benzer mantıkla aşağıdaki gibi farklı bir tuş kombinasyonuda belirleyebiliriz;

<input #box (keyup.b)="onEnter(box.value)">
<p>{{text}}</p>

Görüldüğü üzere “b” tuşuna basıldığı anda “onEnter” eventı tetiklenecektir.

Son olarak koleksiyonel durumları göz önüne almamızı sağlayacak aşağıdaki durumu değerlendirelim.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  personeller = ["Ahmet", "Ali", "Yusuf", "Ziya"];
  personelEkle(personel: string) {
    if (personel) // Personel boş mu dolu mu? -> TypeScript'te bu şekilde direkt kontrol mümkün. 
      this.personeller.push(personel);
  }
}

Yukarıdaki kod bloğunu incelerseniz eğer “personeller” isminde bir string dizimiz mevcuttur. Ayrıca “personelEkle” isminde de ilgili diziye eleman eklememize yarayacak metodumuz vardır.

<input #txtpersonel type="text" (keyup.enter)="personelEkle(txtpersonel.value)" />
<ul>
  <li *ngFor="let personel of personeller">
    {{personel}}
  </li>
</ul>

Input’a girilen değer “enter” tuşuna basıldığı zaman tetiklenecek olan “keyup” eventı aracılığıyla “personelEkle” fonksiyonu tarafından diziye eklenecektir. İşte böyle durumda “ngFor” yapısı hemen tetiklenecek ve yeni eklenen veriyi de listelemeye dahil edecektir.

Angular uygulamalarında event binding mekanizmasının ne şekilde, hangi kurallarda cereyan ettiğini hafif yüzeysel değerlendirmiş bulunmaktayız.

Umarım faydalı bir içerik olmuştur.

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…