title: Angular 2- Value not updated in the input text box but its updated if used inside the curly braces
body: <pre><code>import { Component } from '@angular/core';
  
  @Component({
  
    selector: 'my-app',
    template: `&lt;input [(ngModel)]="name"  type="text" (input)="inputChange()"&gt;
  &lt;h3&gt;{{name}}&lt;/h3&gt; `
  })
  export class AppComponent  { 
    name = 'Apple'; 
  
     inputChange() {
       this.name="Zebra";
  
    }
  }
  </code></pre>
  
  <p>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",</p>
  
  <p><a href="https://i.stack.imgur.com/SxISX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SxISX.png" alt="the value of name is changed but its not reflected in the textbox."></a></p>
  
  <p>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?</p>