Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Reference component in AEM SPA

Avatar

Level 4

Hi Experts, 

We're extending our application to SPA support, which means all the Touch UI components are extended to SPA and writing the code in Angular.

 

As mentioned, all the components, which support SPA that would work in the SPA template. There is a reference Touch UI component, which would refer to other AEM components from another AEM page. The logic of the reference touch UI component would be to get the path of the AEM page and add in the sling: include. How can this logic be handled if we convert this into a SPA reference component (angular)? 

 

I'm raising this as the sling: include can't be handled it in angular component, how to handled this?

 

Your help would be pretty much appreciated.

 

Thank you,

Nanda

1 Accepted Solution

Avatar

Correct answer by
Level 4

I've implemented the reference component using the AEM model provider directive.

View solution in original post

4 Replies

Avatar

Community Advisor

Which version of AEM you are using ?

Reference component is removed from core components 

 

Ref: https://www.aemcomponents.dev/

 

Avatar

Level 4

Thanks for the response @HImanshu_Jain_ .

 

We are using AEM 6.5.10. However, the reference which I mentioned above, it's our custom component. This was provided to our customers in classic UI. Even in the touch UI, it works fine. We are in a situation to give the feature in SPA as well, as most of the pages use this component. do we have any solution for this?

 

Thanks

Nanda

 

 

Avatar

Level 4

Hi Everyone,

I just want to check, would the "data-CQ-data-path" angular directive resolve the issue? I was studying a few Adobe SPA components and I came across this 

 

<div
[aemModelProvider]
[cqItem]="getItem(itemKey)"
[cqPath]="getDataPath(itemKey)"
[itemName]="itemKey"
[attr.data-cq-data-path]="getDataPath(itemKey)"></div>
 
In my understanding, this would provide the parsys (responsive grid) for the SPA application?
Is my understanding correct?

Avatar

Correct answer by
Level 4

I've implemented the reference component using the AEM model provider directive.