my componentC triggers an action that I pass all the way to componentA
I want to set the visible variable in componentB to false/true based on the logic in componentC.
this.container.lookup(‘component:componentB’) gets me the specific instance of the component B that I need. this.container.lookup(‘component:componentB’).get(‘visible’) returns me false as well. but this.container.lookup(‘component:componentB’).set(‘visible’, true) does not seem to work.
please don’t do that, I mean this.container.lookup thing.
This is communication between two sibling components, in order to let them know each other’s state, you need to get/set the state one level up.
{{component-a}} is the common parent for both {[component-b}} and {{component-c}}, so the first step is to setup a state property in {{component-a}} and expose it to its children:
in this way, visible can be accessed by any children components, and only {{component-a}} can change the visible’s value. We expose this state and the corresponding action to its children like this:
{{#component-a as |visible toggleVisibility|}}
{{component-b visible=visible}}
{{component-c toggle=toggleVisibility}}
{{/component-a}}
Now, {{component-b}} can use its own visible property as the true/false state, and {{component-c}} will have a this.attrs.toggle() method to change the visible’s value.
now componentC (or any of the nested components within C) fires an event that I handle in the component A action.
now depending upon which componentC triggered the action, I need to update the visible property of the corresponding componentB
in Component A, I have access to the current index of the componentC that is triggering the event. How in my componentA I can do, say, “get componentB[currentIndex] and set visible property to something.”