Expand my Community achievements bar.

SOLVED

website creation

Avatar

Level 2

Hi guys, I need help, I'm creating a website with multiple pages, there is a default navigation component, but I need to style it to suit what I need, but I need its style to be inside the ui.frontend with angular, better with the angular component which is what I'm used to,
communicating with MapTo.
Can anyone help me with this topic?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor
5 Replies

Avatar

Level 2

Hi, what I need is how can I style the navigation component, using ui.frontend or make a component that has the same configuration

Avatar

Community Advisor

Hi, 

 

If you intend to utilize the MapTo method, it requires implementing an SPA project using Angular. This represents a significant architectural decision that requires careful consideration. Typically, adopting an SPA approach introduces its own challenges, such as implementing SSR (Server-Side Rendering), among others. My advice is to set aside any technology preferences and focus on selecting the best approach for the website you're creating, considering its purpose and nature. Now from what you've described (styling a navigation component), Angular may not be necessary. You could achieve the same with vanillaJS within the ui.frontEnd module, leveraging additional JavaScript frameworks as needed.

 

The ui.frontEnd module is specifically designed for styling components and managing complex UI/UX structures. You have the flexibility to use tools like SASS or any preferred pre-processor, along with TypeScript or other suitable technologies (including Angular). Before making such a significant decision, I recommend exploring how to develop components and effectively utilize the ui.frontend module, please check these threads: 

https://medium.com/@toimrank/aem-ui-frontend-module-complete-guide-265175c540b0 

https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-wknd-tutorial-de...


However, If you want to dive into the SPA approach you can read these articles: 

https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/dev... 

https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-with-aem-headles... 

 

Hope this helps



Esteban Bustamante

Avatar

Level 2

hi, I already have everything configured using MapTo, I need a way to create the header in the same way that navigation does

Avatar

Correct answer by
Community Advisor

Oh, I see. Then, you should check the navigation component from SPA - Angular project, here you have: https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-with-aem-headles...and the code https://github.com/adobe/aem-guides-wknd-spa/tree/Angular/navigation-routing-solution 



Esteban Bustamante