Within a child component, I have defined the property like this:
@Input() submitButtonDisabled: boolean;
To assign this property within the parent component's template, I utilized property binding with interpolation as follows:
<my-child-component
[submitButtonDisabled]="{{disableSubmitButton()}}">
</my-child-component>
When the child component template accesses its submitButtonDisabled property, it is done in this manner:
<button id="btSubmit" type="submit" (click)="submit()"
[disabled]="submitButtonDisabled">Ok</button>
Despite verifying that the property binding is functioning correctly during TypeScript debugging, the submit button remains disabled regardless of what disableSubmitButton returns. It appears that the component is being rendered before the binding can occur.
Can you make sense of this dilemma? Where might my error lie?
For more information, visit: Angular 2 - Component Communication