Reference component in AEM SPA | Community
Skip to main content
Nandujee
Nandujee
Level 3
May 30, 2022
Solved

Reference component in AEM SPA

  • May 30, 2022
  • 2 replies
  • 1393 views

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

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 Nandujee

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

2 replies

Himanshu_Jain
Community Advisor
Himanshu_JainCommunity Advisor
Community Advisor
May 30, 2022

Which version of AEM you are using ?

Reference component is removed from core components 

 

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

 

Himanshu Jain
    Nandujee
    NandujeeAuthor
    Level 3
    May 31, 2022

    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

     

     

      Nandujee
      NandujeeAuthor
      Level 3
      June 7, 2022

      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?
      Nandujee
      NandujeeAuthorAccepted solution
      Level 3
      June 16, 2022

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

      Terms & ConditionsAccessibility statement

      Loading footer...