Web uygulamalarımızda kullanıcıların etkileşimlerinizi takip ettiğimiz eventleri, angular da event binding özelliği ile kontrol ediyoruz.

click, hover, keyup vb. eventler den click event’ inin uygulanışını anlatıyor olacağım.
Daha önceki konularda oluşturduğum product component’ te ürünün satın al butonuna tıklandığında click event’ ini yakalayıp aksiyon almayı göstereceğim.

Template tarafında event ler, parantez içinde yazılarak kuruluyor.

<button class="btn btn-primary" [disabled] = "!product.ableToBuy"
              (click) = "addToBasket()">
                  Satın Al
</button> 

click event’ ini parantez içinde yazdım. click gerçekleşince yorumlanacak expression ı ise tırnak işareti içinde yazdım.

Ayrıca click event’ ine bağladığım fonksiyon üzerinden parametre de paslayabilirim. Template’ in son hali şu şekildedir;

<div class="row">

        <div class="col-sm-6 col-md-4">

          <div class="thumbnail">

            <div class="caption">

              <h3>{{ product.name }}</h3>

              <p>{{ product.price }} TL</p>

              <button class="btn btn-primary" [disabled] = "!product.ableToBuy"
              (click) = "addToBasket(product.name)">
                  Satın Al
              </button> 

            </div>

          </div>

        </div>

</div>

Component’ te sahip olduğum product objesinin özelliğini metod içinde yazarak parametre paslamayı sağlıyorum.

Şimdi component’ in class’ ında ilgili fonksiyonu yazalım;

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  product = {
    name : 'bluetooth kulaklık',
    price: 1000,
    ableToBuy : true
  };

  addToBasket(name){
    alert(name + " sepete eklendi");
  }

  constructor() { }

  ngOnInit() {
  }

}

addToBasket metodunu tanımladım, template’ den passladığım name değişkenini aldım ve alert olarak ekrana basıyorum.

Last modified: 22 October 2019

Author

Comments

Write a Reply or Comment

Your email address will not be published.