set the disabled flag dynamically

[Jyothi]

Hi,

I need to be able to enable/disable dynamically. This is easy when there is a paren child relationship. I can use ViewChild to get access to the disabled variable of the child and that works.

     Example: MySplitButton component have a method to set the flag to true or false

                      setButtonStatus(flag : boolean){
                                  this.isButtonDisabled = flag }

In parent I can access the child and call the method.

 @ViewChild(MySplitButton) splitComponent : MySplitButton;

                     this.splitComponent.setButtonStatus(true);

 

When the MySplitButton component is not the direct child, how do I set access to the this component from lets say grand parent component?

Regards,

Jyothi

[Dimiter Madjarov]

Hello Jyothi,

A possible solution is for the grandparent to invoke a parent method, which will then again invoke the splitbutton method. However the more reliable approach when the state needs to be changed from multiple levels of the component hierarchy is to create a service, responsible for this operation. It could then be injected anywhere, where the state needs to be updated or accessed. Further details about services could be found on the following link:

https://angular.io/tutorial/toh-pt4

Regards,
Dimiter Madjarov
Progress Telerik

[Jyothi]

H Dimiter,

I took the first approach as didn't want to create a service just for this functionality. Thanks for the prompt reply.

 

Regards,

Jyothi