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

Question

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>

Answer 1

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.

Answer 2

For @Input decorator we have optional argument bindingPropertyName which controls how we can bind that property in html, if no supplied it defaults to the name of property.

so, if you write

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

You are setting bindingPropertyName to amt hence to use it in template you need to write something like.

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

you can skip bindingPropertyName and it will use default value (name of property here amount) or use something else if needed.

Generally, we don't use bindingPropertyName but sometimes for directives we may want to avoid conflict of binding property name (as we can apply a directive to a component which may also define a property with same name and bindingPropertyName) so we can prefix it with directive name.