title: How [ngModel] and (ngModelChange) work together?
body: <p>I am new to angular and I am learning Angular 6. I understood about ngModel. But while I was experimenting with ngModelChange, some questions raised.</p>
  
  <p>I have an html element 
  HTML</p>
  
  <pre><code>&lt;input #input  type="text" [value]="name" [(ngModel)] ="name" (ngModelChange) ="change(input.value)"/&gt;
  </code></pre>
  
  <p>Typescript</p>
  
  <pre><code>change(event :any) {
      this.name = event;
      console.log(this.name);
  }
  </code></pre>
  
  <p>Upon changing the value in the input , I can see the changes with the name property.</p>
  
  <p>When I changed the html code to</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;input #input type="text" [value]="name"  [ngModel] ="name" 
  (ngModelChange)="change(input.value)" /&gt;
  {{ name }}
  </code></pre>
  
  <p>TS</p>
  
  <pre><code>change(event :any) {
      this.name = event;
      console.log(this.name);
  }
  </code></pre>
  
  <p>It's working fine as expected in the console and in the UI.</p>
  
  <p>Question 1 </p>
  
  <pre><code>&lt;input #input  type="text" [value]="name" [(ngModel)] ="name" 
  (ngModelChange) ="change(input.value)"/&gt;
  </code></pre>
  
  <p>&amp;</p>
  
  <pre><code>&lt;input #input type="text" [value]="name"  [ngModel] ="name" 
  (ngModelChange)="change(input.value)" /&gt;
  </code></pre>
  
  <p>are same??</p>
  
  <p>Question 2. </p>
  
  <p>When I remove the [ngModel] directive. The ngModelChange is not getting triggered. Is it mandatory to have [ngModel]? If yes,Why?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;input #input type="text" [value]="name" 
  (ngModelChange)="change(input.value)" /&gt;
  &lt;br/&gt;
  &lt;br/&gt;
  {{ name }}
  </code></pre>
  
  <p>TS</p>
  
  <pre><code>change(event: any) {
       this.name = event;
       console.log(this.name);
   }
  </code></pre>
  
  <p>This would be a great help.
  Thanks in Advance.</p>