Angular 2 - Event Binding

angular2

// Angular 2 - Event Binding:

To use Angular event binding, modify the li element:

<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
  <span class="badge">{{hero.id}}</span> {{hero.name}}
</li>

Notice the (click)="onSelect(hero)" part.  The parenthesis identify the click
event as the target.  The expression to the right of the equal sign call the
component's method, onSelect(), passing the template input variable hero as
an argument.  That is the variable we defined previously with the ngFor directive.

<button (click)="goBack()">Back</button>

// hero-detail.component.ts
goBack(): void {
  this.location.back();
}

// Bind the click event to the "save()" method of the component:
<button (click)="save()">Save</button>

// Bind the click event to the "delete" method, passing the
// hero object to the delete method, and invoking $event.stopPropagation:
<button class="delete"
  (click)="delete(hero); $event.stopPropagation()">x</button>
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License