Angular 2 - how data binding works: property binding


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

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

// app.hamburgers.html
<tbody>
 <tr *ngFor='let hamburger of hamburgers'>
    <td>
      <img [src]='hamburger.imageSrc' [title]='hamburger.name' [style.width.px]='imageWidth'>
    </td>
 </tr>
</tbody>