<h1>{{title}}</h1>
<div><label>Id: </label>{{hero.id}}</div>
<div><label>Name: </label>{{hero.name}}</div>

<!--One-way binding-->
<h1>One-way binding</h1>
<div>
<input [value]="hero.name">
</div>

<!--Two-way binding-->
<h1>Two-way binding</h1>
<div>
  <label>name: </label>
  <input [(ngModel)]="hero.name" placeholder="name">
  
</div>

<!--ngFor Example-->
<!--<h1>ngFor</h1>
<h2>My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes">
      <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>-->

<!--Handling Events-->
<h1>ngFor with Event handling</h1>
<h2>My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes" (click)="onSelect(hero)">
      <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

<!--ngIf-->
<!--<div  *ngIf="selectedHero">
  <label>name: </label>
  <input [(ngModel)]="selectedHero.name" placeholder="name">
</div>-->

<!--Multiple Components-->
<hero-detail [hero]="selectedHero"></hero-detail>