Angular 2 - how data binding works: event binding




// Component class

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

@Component({
 selector: 'app-hamburgers',
 templateUrl: './app.hamburgers.html'
})
export class HamburgersComponent {
 showImage: boolean = false;
 hamburgers: any[] = [
    {
      'name': 'Big Kahuna Burger',
      'imageSrc': 'http://breds-breakfast.com/bigkahuna.jpg'
    }
  ];
 
 toggleImage():void {
   this.showImage = !this.showImage;
 }
}

// app.hamburgers.html
<button (click)='toggleImage()'>
<tbody>
 <tr *ngFor='let hamburger of hamburgers'>
    <td>
      <img *ngIf='showImage' [src]='hamburger.imageSrc'>
    </td>
 </tr>
</tbody>