Paweł Łukasiewicz
2020-02-15
Paweł Łukasiewicz
2020-02-15
Udostępnij Udostępnij Kontakt
Wprowadzenie

W Angular 8 wiązanie zdarzeń wykorzystywane jest do obsługi zdarzeń wywoływanych bezpośrednio z DOM - zaliczamy do nich kliknięcie przycisku, ruch myszy czy zmianę wartości tekstowej. Interakcja taka powoduje wywołanie określonej metody w komponencie. W poniższym przykładzie kliknięcie przycisku spowoduje wywołanie metody BuyCar:

<button (click)="buyCar()"></button>

Przykłady

Ponownie odsyłam do artykułu z którego możecie pobrać szablon projektu (jeżeli jeszcze tego nie zrobiliście): Angular 8: property binding
Przykłady w tym wpisie będą testowane/dodawane poniżej (rozwinięty komponent): Komponent dla Event Binding

Prześledźmy modyfikacje niezbędne do poprawnej "implementacji" przykładu wspomnianego we wprowadzeniu. W pierwszym kroku dodamy metodę w pliku event-binding.component.ts (tym razem wykorzystamy domyślną strukturę pliku TypeScript):

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

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

  brand: string;
  model: string;
  imageUrl: string;

  constructor() {
    this.brand = "Audi";
    this.model = "RS6";
    this.imageUrl = "https://image.shutterstock.com/z/stock-photo-london-england-audi-rs-avant-performance-estate-car-parked-in-mayfair-ditrict-of-694886881.jpg";
   }

  ngOnInit() {
  }

  buyCar($event) {
    console.log("Gratulacje, właśnie kupiłeś " + this.brand +  " " + this.model, $event);
  }
}
Po stronie szablonu HTML dodamy możliwość ‘zakupu’ auta:
<p>Komponent przeznaczony dla: event-binding</p>

<!-- PropertyBinding -->
<img [src]="imageUrl" style="width:80%;margin-left:auto;margin-right:auto;display: block" />

<!-- Event Binding -->
<button (click)="buyCar($event)" style="width:150px;display:block;margin-left:auto;margin-right:auto;margin-top:15px;padding:10px">Kup samochód!</button>

<!-- Komentarz: właściwość 'style' dodałem tylko do celów prezentacji - powinniśmy posługiwać się właściwością 'class' -->
Zauważyliście $event?. Jest to parametr opcjonalny, który niesie ze sobą różne właściwości dotyczące tego konkretnego zdarzenia. Całość przedstawia się w poniższy sposób: Przykład zastosowania Event Binding

Po kliknięciu przycisku zobaczycie stosowną informację wraz ze różnymi właściwościami zdarzenia (kliknięcie przycisku): Event Binding Console Log