How to pass data from parent to child components?

Question

I have this property in a child component:

@Input() submitButtonDisabled: boolean;

In the template of my parent component I set it via property binding using interpolation:

<my-child-component
  [submitButtonDisabled]="{{disableSubmitButton()}}">
</my-child-component>

The child component template reads its submitButtonDisabled property this way:

<button id="btSubmit" type="submit" (click)="submit()" 
  [disabled]="submitButtonDisabled">Ok</button>

Debugging my typescript code I see property binding working fine, but the submit button keeps disabled no matter what disableSubmitButton returns (a boolean value). It seems the component is being rendered before the binding to take place.

Does this make any sense? Where is my mistake?

Reference: Angular 2 - Component Communication

You've spelt submit with two m's. It looks like you've used it consistently, but just check if you haven't got a different spelling anywhere — Christopher Moore, Jan 21 '17 at 09:42

score 5 · Accepted Answer · answered Jan 21 '17 at 13:24

If you're passing a string literal to your input property, DO NOT USE the square brackets:

<my-comp isDisabled="yes"></my-comp>
<my-comp isDisabled="no"></my-comp>

In this example, the input property isDisabled will contain the string 'yes' or 'no'.

If you're passing anything other than a string literal, then you MUST use the square brackets:

<my-comp [isDisabled]="true"></my-comp>
<my-comp [isDisabled]="false"></my-comp>
<my-comp [isDisabled]="shouldItBeDisabled()"></my-comp>

In that example, the input property isDisabled will contain the boolean true or false, or the value returned by the shouldItBeDisabled() method.

Notice how NONE of these scenarios uses {{ ... }}.

In your case, the problem might be that your method disableSubmitButton() doesn't return the correct value. (Also, like Ron537 said, you should drop the {{ ... }}.)

The disableSubmitButton is ok, but you'e right about curly braces. Removing it was enough to solve the problem. — Fernando Costa, Jan 21 '17 at 21:12

score 1 · Answer 2 · edited Jan 21 '17 at 11:23

1

Try to remove the double parenthesis from the binding.

Instead of this :

[submitButtonDisabled]="{{disableSubmitButton()}}"

Use this :

[submitButtonDisabled]="disableSubmitButton()"

Or this :

submitButtonDisabled="{{disableSubmitButton()}}"

edited Jan 21 '17 at 11:23

Fernando Costa

669
1
9
31

answered Jan 21 '17 at 09:41

Ron537

990
1
9
20

First option worked: [submitButtonDisabled]="disableSubmitButton()". The second one did not work. Theses binding are confusing to me. I need to read more about it. – Fernando Costa Jan 21 '17 at 21:05

How to pass data from parent to child components?

2 Answers2