Bind value in textbox in Angular 2
<p>I have a button btnAdd , a textbox and list with a edit button btnEdit in a html file. When I click on btnAdd it insert a textbox value into list and when click on btnEdit I want to display selected value of list into Text box.</p>

<p>Below is my Component Code:</p>

<pre><code>import { Component } from '@angular/core';
import {Hero} from './hero';   

@Component({
  selector: 'my-Home',
   templateUrl: 'app/Home/home.component.html',
})
export class HomeComponent  {  

   title = 'Tour of Heroes';
   newH : Hero;
   heroes = [new Hero(1, 'Windstorm'), new Hero(13, 'Bombasto'),new Hero(15, 'Magneta'), new Hero(20, 'Tornado')];

  addHero(newHero:string) {
     this.title ="Button Clicked";
      if (newHero) {    
      let hero =  new Hero(14,newHero);   
      this.heroes.push(hero);
     }
  } 

  onEdit(hero: Hero) {   
    // want to display selected name in textbox. 

  } 

 }
</code></pre>

<p>Below is Html code :</p>

<pre><code>&lt;input type = 'text' #newHero/&gt;
&lt;button (click)=addHero(newHero.value)&gt;Add Hero!&lt;/button&gt; 

    &lt;ul&gt;
       &lt;li *ngFor="let hero of heroes" &gt;          
        &lt;span &gt;{{ hero.id }}&lt;/span&gt; {{ hero.name }}        
       &lt;button (click)=onEdit(hero)&gt;Edit!&lt;/button&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
</code></pre>

<p>Below is my class :</p>

<pre><code>export class Hero {
  constructor(
    public id: number,
    public name: string) { }
}
</code></pre>

<p>Thanks,</p>