title: Update value of list item on button click in Angular 2
body: <p>I have a button btnAddUpdate, 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, it will display selected value in textbox and now I want to update that value in list.</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')];
  
  
  // If not in list please add else Update list value.
        addHero(newHero:string) {
           this.title ="Button Clicked";
            if (newHero) {    
            let hero =  new Hero(14,newHero);   
            this.heroes.push(hero);
           }
        } 
  
  
         selectedHero = '';
      onEdit(hero: Hero) {   
      this.selectedHero = hero.name;
  
       }
  </code></pre>
  
  <p>Below is html code :</p>
  
  <pre><code>&lt;input type='text' [value]="selectedHero" #heroName/&gt;
  &lt;button (click)="addHero(heroName.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>