AEM 6.5, SPA, Angular 9 - How do I subscribe to a parent container component from a child component? | Community
Skip to main content
D
dpkhmhs
Level 2
February 29, 2024
Solved

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

  • February 29, 2024
  • 1 reply
  • 598 views

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.

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by EstebanBustamante

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-class

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

 

Hope this helps

1 reply

EstebanBustamante
Community Advisor and Adobe Champion
EstebanBustamanteCommunity Advisor and Adobe ChampionAccepted solution
Community Advisor and Adobe Champion
March 14, 2024

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-class

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

 

Hope this helps

Esteban Bustamante
Terms & ConditionsAccessibility statement

Loading footer...