Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
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/

 

Himanshu Jain

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.