AEM 6.5, SPA, Angular 9 - How do I subscribe to a parent container component from a child component?

[dpkhmhs]

AEM 6.5, SPA, Angular 9

In the editor and published page via Typescript, I'd like to subscribe to a parent container component from a child component.  If I drag a parent container component on the editor page and then drag a child component so it is inside of the parent container, how can the child get a reference to it's closest parent so it can subscribe to parent changes?

When a component is dragged onto the editor page, are there certain Angular-monitored events that are triggered and would help with a solution?

Two use cases I'm trying to solve:

1. The parent container has a background color property that is also the background color of any child component.  The child component needs to know what its closest parent's background color is so it can use the appropriate text color.
2. To dynamically build a backend data structure, the child needs to know the ID of its closest parent component.

[EstebanBustamante · Accepted solution]

Hi, 

You don't necessarily need any specific Angular or AEM functionality to achieve this. You could simply utilize the "closest" selector to locate the parent container. Once you've obtained the parent, you can retrieve the details and perform updates to your children.

You would implement something along these lines:

<div class="container">
    <div class="component1">
    </div>
    <div class="component2">
    </div>
</div>

//Using JS
document.querySelector(".component2").closest(".container")

Please check these links:

https://stackoverflow.com/questions/22119673/find-the-closest-ancestor-element-that-has-a-specific-c...

https://developer.mozilla.org/en-US/docs/Web/API/Element/closest 

Hope this helps