Inside ngOnChange, SimpleChange currentValue is defined but console log saids undefined

Question

Inside the typescript, there are a name variable takes input from another component.

@Input() name : any ; 

And inside the ngOnChange I print the SimpleChange object like this.

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

The result in the console is as followed.

I don't understand why in console, it can tells there are string "Cafeteria Old Beach" for currentValue property. Yet when I console.log(changes.currentValue), it returns undefined. How can I properly access the currentValue property value? Thanks in advance.

Answer 1

it is because after the changes there should be prop, in your case you have made changes.currentValue. and also change SimpleChange to SimpleChanges Please try following.

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

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

}

}