In the function ngOnChange, the SimpleChange currentValue is supposed to be defined, but for some reason, the

Question

In the function ngOnChange, the SimpleChange currentValue is supposed to be defined, but for some reason, the

Within the TypeScript code, a name variable is assigned input from another component.

@Input() name : any ;

In the ngOnChange function, I retrieve and print the SimpleChange object in the following manner.

ngOnChanges(changes: SimpleChange){
    console.log(changes);
    console.log(changes.currentValue);
}

The output displayed in the console is as follows. https://i.sstatic.net/MhxM5.png

I am puzzled by the fact that the console shows a string value of "Cafeteria Old Beach" for the currentValue property. However, when I use

console.log(changes.currentValue)

, it returns undefined. How can I correctly access the value of the currentValue property? Thank you in advance.

angular typescript ngonchanges

Answer 1

Answer №1

The reason for the error is that you need to use prop instead of changes.currentValue after making the changes. Also, make sure to replace SimpleChange with SimpleChanges. Here's the corrected code:

import { SimpleChanges } from '@angular/core';
export class TestComponent {
 @Input() name : any ;
 
constructor(){}

ngOnChanges(changes: SimpleChanges){
    console.log(changes);
    console.log(changes.name.prop);
    console.log(changes.name.previousValue);

}

}

Answer 2

The reason for the error is that you need to use prop instead of changes.currentValue after making the changes. Also, make sure to replace SimpleChange with SimpleChanges. Here's the corrected code:

import { SimpleChanges } from '@angular/core';
export class TestComponent {
 @Input() name : any ;
 
constructor(){}

ngOnChanges(changes: SimpleChanges){
    console.log(changes);
    console.log(changes.name.prop);
    console.log(changes.name.previousValue);

}

}

In the function ngOnChange, the SimpleChange currentValue is supposed to be defined, but for some reason, the

Answer №1

Similar questions

What could be the reason for the failed authentication HTTP request to Firebase resulting in error 400?

Is it possible to establish multiple connections simultaneously using Stomp?

I encountered a TS error warning about a possible null value, despite already confirming that the value

Having trouble getting your custom Angular directive to work properly with interpolation?

What is the best way to save code snippets in Strapi for easy integration with SSG NextJS?

Utilizing Omit for the exclusion of nested properties within a TypeScript interface

What is the best method for compressing and decompressing JSON data using PHP?

Is it possible to modify the HTML/CSS of a child component using the parent component in Angular 2+?

What is the reason for the inclusion of information in the error log by the `ng

IDE flags an error with TypeScript type declarations

Tips for utilizing the @Component decorator in both abstract classes and their implementations within Angular 8

What is the process for displaying all items within an object in Ionic 3?

Retrieve the values stored under the "kilos" key for every object in the dataset

Get the @types definition installed from a forked repository

Utilize knex.js and TypeScript to create queries with specific conditions

Having trouble accessing the dashboard after uploading a document to Firestore

Validators in Angular forms are a powerful tool for enforcing

Exploring the Module System of TypeScript

Refreshing HTTP request in Angular

Fixing a wrong path in the problem matcher of vscode while compiling using $tsc-watch: A step-by-step