Angular2 Input call twice a method

Question

why this code call twice the method 'addHero' ?

        @Component({
      selector: 'little-tour',
      template: `
        <input #newHero
          (keyup.enter)="addHero(newHero.value); newHero.value='' "
          (blur)="addHero(newHero.value); newHero.value='' ">
        <button (click)=addHero(newHero.value)>Add</button>
        <ul><li *ngFor="let hero of heroes">{{hero}}</li></ul>

        <p>{{pressed}}</p>
      `
    })
    export class LittleTourComponent {
        number = 1;
        pressed='';
      heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
      addHero(newHero: string) {
          if (newHero) {
            if (this.heroes.join('').indexOf(newHero) < 0) {
                this.heroes.push(newHero);
            }
            this.pressed+=' **(into IF)** ';
        }
        //newHero= " ";

        this.pressed+='pressed ' +this.number+', ';
        this.number++;
      }
    }

This is an example:

(into IF) pressed 1, pressed 2, (into IF) pressed 3, pressed 4

the addHero() is called twice because of (blur). Why do want to addHero ob blur? — Bahodir
– Bahodir, Commented Nov 28, 2016 at 12:56
It was an example on official documentation: angular.io/docs/ts/latest/guide/user-input.html — inyourmind
– inyourmind, Commented Nov 28, 2016 at 13:30

Claudio Redi · Accepted Answer · 2016-11-28 13:45:32Z

2

You have three different ways on your code to call addHero:

On enter key pressed while input is focused
On input text blur (focus lost)
On button click

Probably what you see is caused by the fact that blur on input text is executed when you click on button. I'd say you should remove blur handler since it conflicts with button click.

answered Nov 28, 2016 at 13:45

Claudio Redi

68.6k15 gold badges138 silver badges161 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ashutosh Jha · Accepted Answer · 2016-11-28 13:50:19Z

0

use this , it should work fine

<input #newHero
          (keyup.enter)="test(newHero.value); newHero.value='' "
          (change)="test(newHero.value); newHero.value='' ">

answered Nov 28, 2016 at 13:50

Ashutosh Jha

16.6k11 gold badges61 silver badges86 bronze badges

Collectives™ on Stack Overflow

Angular2 Input call twice a method

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related