javascriptangulartypescriptangularjs-directive

@Input() not rendering/receiving the most recent passed value

I am developing an angular application, where I am trying to pass a value from a parent component to a child component using the @Input() decorator. however, the value still renders the old/initial value from the child component and not the updated/most recently passed value from the parent component. Does anyone understand why and how to fix this?

Code:

@Input('amt') amount:any =100;

parent component

<app-payment [amount]="100*2"></app-payment>
Solution

  • The decorator name and the variable name have to match.

    Change:

    @Input('amt') amount:any =100;

    To

    @Input('amount') amount:any =100;

    and that should work.