Issue
I have a component in angular named first_component. I’m using another component named second_component in its HTML like:
<second_component [addChildMode]='addChildMode' [defaultValues]='defaultValues' [chosenRelationIsInitialRelation]='chosenRelationIsInitialRelation'></second_component>
As you see, I’m passing some values from first_component to second_component such as addChildMode, defaultValues etc. using @Input().
(Since I’m using second_component with selector, I can use @Input()).
Now I have a showValue which is a local variable in second_component and I want to be aware of its change! Since I’m not using first_component by its selector, how can I notice when showValue is changed in second component?
P.s. first_component and second_component are just siblings. (Not child and parent)
Solution
Since you need to react to changes in showValue across multiple components, it is not (shouldn’t be) local anymore. If you use NgRX or similar state management, you can put showValue in a store. I recommend this only if that variable has a global bearing.
But since it sounds more like couple components working closely together in a more or less local setting, I recommend using a shared service which will hold the showValue‘s value in a an observable to which these 2 components can push/subscribe.
Answered By – Skocdopole
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0