CODEWITHSUNDEEP
angulartypescript
Hitesh
Hitesh

Reputation: 1228

Update value of list item on button click in Angular 2

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.

Below is my Component 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;

     }

Below is html code :

<input type='text' [value]="selectedHero" #heroName/>
<button (click)="addHero(heroName.value)">Add Hero!</button> 

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

Upvotes: 1

Views: 19688

Answers (2)

Bazinga
Bazinga

Reputation: 11194

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {FormsModule} from '@angular/forms';

export class Hero {
  constructor(public id: number, public name: string){}
}

@Component({
  selector: 'my-app',
  template: `
      <input type="text" [(ngModel)]="heroName" />
      <button (click)="addHero()">Add Hero!</button> 

      <ul>
        <li *ngFor="let hero of heroes">          
          <span>{{ hero.id }}</span> {{ hero.name }}        
          <button (click)="onEdit(hero)">Edit!</button>
        </li>
      </ul>
  `,
})
export class App {
  heroName: string = '';
  heroes: Array<Hero> = [new Hero(1, 'One'), new Hero(2, 'Two')];
  lastName: string;

  addHero() {
    const findHero = this.heroes.find(hero => hero.name === this.lastName);
    if(findHero) {
      findHero.name = this.heroName;
    } else {
      this.heroes.push(new Hero(3, this.heroName));
    }

    this.heroName = '';
  } 


  onEdit(hero) { 
    this.lastName = hero.name;
    this.heroName = hero.name;
  }
}

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Upvotes: 5

penleychan
penleychan

Reputation: 5470

When editing you need to set the object to a variable, simply putting the name value of the hero won't work after all it's just a string, here an example how you would achieve what you want. Just click edit on the hero you want, change the text and press ENTER.

Component:

@Component({
  selector: 'my-Home',
  templateUrl: './myhome.component.html',
})
export class HomeComponent{
  title = 'Tour of Heroes';
  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: Hero;
  selectedHeroText: string = "";

  onEdit(hero: Hero) {
    this.selectedHeroText = hero.name;
    this.selectedHero = hero;
  }
  updateHero(event) {
    if(event.which === 13) {
      if(this.selectedHero !== undefined)
        this.selectedHero.name = event.target.value;
    }
  }
}

HTML:

<input type='text' [value]="selectedHeroText" #heroName (keypress)="updateHero($event)"/>
<button (click)="addHero(heroName.value)">Add Hero!</button>

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

Hope that helps!

Upvotes: 1

Related Questions