0

At child.ts, I have a function onButtonClicked which modify revertDisabled from true to false.

Having an issue where the template reference variable at parent.html is still getting value true for revertDisabled variable, even after the user have executed function onButtonClicked() at child.ts which has changed revertDisabled value from true to false.

I have tried solve it by adding @input at parent.ts but still could not access the changed value of revertDisabled .

parent.html

<button type="button" [disabled]="interface.revertDisabled"></button>
<interface-settings #interface></interface-settings>

child.ts (interface-settings.ts)

this.revertDisabled = true;

onButtonClicked() {
  this.revertDisabled = false;
}
Mario Petrovic
  • 7,500
  • 14
  • 42
  • 62
user21
  • 1,261
  • 5
  • 20
  • 41

1 Answers1

2

Yes parent won't pickup a value this way. Via template variable you can execute a child's method as described here: https://angular.io/guide/component-interaction#parent-interacts-with-child-via-local-variable

But the guide also says it explicitly:

The parent component cannot data bind to the child's start and stop methods nor to its 'seconds' property.

You can accomplish what you need using @Output and the pattern described here: https://angular.io/guide/component-interaction#parent-listens-for-child-event

Basically:

 //child.ts (interface-settings.ts)

 @Output() revertDisabled = new EventEmitter<boolean>();

 onButtonClicked() {
    this.revertDisabled.emit(false);
 }

then:

 //  parent.html
 <button #parentButton type="button"></button>
 <interface-settings (revertDisabled)="parentButton.disabled=false"></interface-settings>
Sergey Rudenko
  • 8,809
  • 2
  • 24
  • 51
  • Thank you! Btw Is wondering if you know about this, I have another question at https://stackoverflow.com/questions/63309569/unable-to-access-template-ref-variables – user21 Aug 08 '20 at 18:36
  • seems like you link this very same question? sorry i am confused – Sergey Rudenko Aug 10 '20 at 17:51
  • Sorry it is this link https://stackoverflow.com/questions/63310432/angular-how-do-i-access-the-reference-variable-which-is-in-a-ng-template – user21 Aug 10 '20 at 18:29
  • answered that question for you. If this one here helped - please accept the answer and same for the other answer. Cheers! – Sergey Rudenko Aug 11 '20 at 16:30
  • I will try the suggestion for the other question. I've accepted the answer for this question. Thanks much! – user21 Aug 11 '20 at 20:02