ngOnChanges doesn't work on two way data binding [(ngModel)]

Component

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnChanges {
  title = 'app';
  user = '';

  ngOnChanges(): void {
    console.log('user changed !');
  }
}

View

<input type="text"
       name="user"
       id="user"
       [(ngModel)]='user'>


<p>{{user}}</p>

[mlc-mlapis]

@pixieaka

You probably missed some information. The OnChanges hook focusses on bounded inputs on a component level - the interface with outers. https://angular.io/api/core/OnChanges

The main root component of an application doesn’t have any bounded inputs, it’s a bootstrap element of the app, so the OnChanges on it has no sense. On any other component, it runs when any of its inputs have been changed (those inputs aren’t the form input tags).

So probably you want to use the syntax <input [ngModel]="user" (ngModelChange)="userChanged($event)" />, where `userChanged` is a method, that runs when a user changes the input value. It’s necessary to say, that there are 2 principal ways how to process forms. Template-based and reactive-based. https://angular.io/guide/forms-overview

[pixieaka]

@mlc-mlapis I’ll take full course in angular on Udemy soon. All the best bro appreciated. I wish for you success for your future projects.