Question 340249 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – @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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Yeah, it turned out that i the decorator name and the variable name has to be matching, i dont know why but this fixed the little issue.

    change:

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

    To

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

    and that should work, if you find yourself making a similar mistake


  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search