Angular 5 seems to be experiencing issues with the function ngOnChanges() not functioning correctly

Question

Angular 5 seems to be experiencing issues with the function ngOnChanges() not functioning correctly

I have been attempting to trigger the ngOnChanges() function in my Angular 5.x component whenever there is a change in the variable this.test either in the component lifecycle or the template. However, I am encountering an issue where the ngOnChanges() function is not being called at all. Can someone please provide assistance?

src/app.ts:

import {Component, NgModule, Input, OnChanges, SimpleChanges} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <input type="text" placeholder="Test field" value="{{ test }}">
    </div>
  `,
})
export class App implements OnChanges {
  @Input() test: string;
  name: string;
  constructor() {
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log('ngOnChanges');

    if (changes.test && !changes.test.isFirstChange()) {
      // exteranl API call or more preprocessing...
    }

    for (let propName in changes) {
      let change = changes[propName];
      console.dir(change);
      if(change.isFirstChange()) {
        console.log(`first change: ${propName}`);
      } else {
        console.log(`prev: ${change.previousValue}, cur: ${change.currentValue}`);
      }
    }
  }


}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Live preview: https://plnkr.co/edit/ZHFOXFhEkSv2f1U3lehv

Any help would be greatly appreciated!

javascript angular typescript ngonchanges

Answer 1

Answer №1

Input properties serve as a way for a parent component to send data to a child component. They should not be used to transfer data from a template to its component.

The onChanges method is only triggered by changes made to the input property defined by the PARENT component.

I have made updates to the plunker by fixing the missing FormsModule and adding a child component to illustrate how to utilize the input property and the onChanges lifecycle hook:

https://plnkr.co/edit/1JF0wV28HnjXDZxMSifY?p=preview

Child Component

@Component({
  selector: 'my-child',
  template: `
    <div>
      <input type="text" [(ngModel)]="test" placeholder="Test field">
    </div>
  `,
})
export class ChildComponent implements OnChanges {
  @Input() test: string;
  name: string;
  constructor() {  }

  ngOnChanges(changes: SimpleChanges) {
    console.log('in ngOnChanges');
    if (changes.test && !changes.test.isFirstChange()) {
      // external API call or more preprocessing...
    }

    for (let propName in changes) {
      let change = changes[propName];
      console.dir(change);
      if(change.isFirstChange()) {
        console.log(`first change: ${propName}`);
      } else {
        console.log(`prev: ${change.previousValue}, cur: ${change.currentValue}`);
      }
    }
  }
}

Parent Component

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <my-child [test]='parentTest'></my-child>
      <button (click)='onClick()'>Change Value</button>
    </div>
  `,
})
export class App {
  parentTest: string;
  name: string;
  counter = 1;

  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }

  onClick() {
    this.parentTest = `test: ${this.counter}`;
    this.counter++;
  }
}

To detect changes from the template in the template's component, use a setter instead:

  // To catch changes from the template
  _test: string;
  get test(): string {
    return this._test;
  }

  @Input()
  set test(value: string) {
    this._test = value;
    console.log("Textbox value changed: " + this._test);
  }

Alternatively, you can follow Sajeetharan's suggestion to capture changes from the template in its corresponding component. This approach will also be effective.

Answer 2

Input properties serve as a way for a parent component to send data to a child component. They should not be used to transfer data from a template to its component.

The onChanges method is only triggered by changes made to the input property defined by the PARENT component.

I have made updates to the plunker by fixing the missing FormsModule and adding a child component to illustrate how to utilize the input property and the onChanges lifecycle hook:

https://plnkr.co/edit/1JF0wV28HnjXDZxMSifY?p=preview

Child Component

@Component({
  selector: 'my-child',
  template: `
    <div>
      <input type="text" [(ngModel)]="test" placeholder="Test field">
    </div>
  `,
})
export class ChildComponent implements OnChanges {
  @Input() test: string;
  name: string;
  constructor() {  }

  ngOnChanges(changes: SimpleChanges) {
    console.log('in ngOnChanges');
    if (changes.test && !changes.test.isFirstChange()) {
      // external API call or more preprocessing...
    }

    for (let propName in changes) {
      let change = changes[propName];
      console.dir(change);
      if(change.isFirstChange()) {
        console.log(`first change: ${propName}`);
      } else {
        console.log(`prev: ${change.previousValue}, cur: ${change.currentValue}`);
      }
    }
  }
}

Parent Component

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <my-child [test]='parentTest'></my-child>
      <button (click)='onClick()'>Change Value</button>
    </div>
  `,
})
export class App {
  parentTest: string;
  name: string;
  counter = 1;

  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }

  onClick() {
    this.parentTest = `test: ${this.counter}`;
    this.counter++;
  }
}

To detect changes from the template in the template's component, use a setter instead:

  // To catch changes from the template
  _test: string;
  get test(): string {
    return this._test;
  }

  @Input()
  set test(value: string) {
    this._test = value;
    console.log("Textbox value changed: " + this._test);
  }

Alternatively, you can follow Sajeetharan's suggestion to capture changes from the template in its corresponding component. This approach will also be effective.

Answer 3

Answer №2

If you're looking to detect model changes, consider using ngModelChange instead of ngOnChanges.

<input type="text" placeholder="Test field" (ngModelChange)="printVal()">

Then, in your component:

printVal(){
  // Implement logic to detect model change here
}

ngOnChanges is typically used with @Input event emitters.

Answer 4

If you're looking to detect model changes, consider using ngModelChange instead of ngOnChanges.

<input type="text" placeholder="Test field" (ngModelChange)="printVal()">

Then, in your component:

printVal(){
  // Implement logic to detect model change here
}

ngOnChanges is typically used with @Input event emitters.

Angular 5 seems to be experiencing issues with the function ngOnChanges() not functioning correctly

Answer №1

Answer №2

Similar questions

Is it a bad idea to incorporate JavaScript functions into AngularJS directives?

Use jQuery to duplicate an image that has the "active" class, then assign it as the background image for a div element

Enhancing the Appearance of HTML Select Dropdowns in JavaFX 2.2 WebEngine

Creating a Jest TypeScript client mock that returns an array filled with undefined elements instead of the expected resolved values

The seamless integration of React.js with HTML

Error encountered while executing ExpressJs function that was converted to a promise

Creating a versatile Express Router that can serve multiple websites by utilizing conditional routes based on the domain name

Tips for including MUI icon within a list displayed on a map:

Guide on retrieving documents from a collection in mongodb by utilizing the $nin operator

Animate the removal of a div message with the help of CSS and jQuery

Displaying the value of a jquery variable in an HTML document

Ways to mock a static method within an abstract class in TypeScript

Error: The "require" function is not recognized within the Rollup bundle JavaScript file

Mapping over an array and ignoring any undefined properties in a dynamic object

What are the steps to integrate DeviceOrientationControls with scrolling on iOS 13?

What could be causing my AngularJs routing and animation to bypass the second redirection?

Is there a way for me to personally include pages in the browser's cache?

What is the best way to create a responsive Toolbar with collapsible overflowing buttons that does not rely on setTimeout()?

What is the best way to verify in Nest.js that a DTO is a number and not blank?

Clicking on the Google Maps direction service can add additional markers to the map