Search code examples
angularcomponentsangular-ngmodel

Angular 2- Value not updated in the input text box but its updated if used inside the curly braces

import { Component } from '@angular/core';

@Component({

  selector: 'my-app',
  template: `<input [(ngModel)]="name"  type="text" (input)="inputChange()">
<h3>{{name}}</h3> `
})
export class AppComponent  { 
  name = 'Apple'; 

   inputChange() {
     this.name="Zebra";

  }
}

here's my angular component. I have an input box and on every key input the function "inputChange()" is called which changes my name to "Zebra",

the value of name is changed but its not reflected in the textbox.

I have to validate the user input and return certain values for which I have to call the input event everytime they write something. I want the textbox value to be same as "Zebra" as my function changes the value no matter what the user types in the textbox. What am i doing wrong here?

Solution

  • Change your input event to keyup

    <input [(ngModel)]="name"  type="text" (keyup)="inputChange()">