website creation

[ElvisRo]

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?

[h_kataria]

I think you can just define your styles in your ui.frontend code and then try to leverage AEM's style system https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/sites/authoring/... 
Sample for AEM's core navigation component 
https://experienceleague.adobe.com/en/docs/experience-manager-core-components/using/wcm-components/n... 

[ElvisRo]

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

[EstebanBustamante]

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

[ElvisRo]

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

[EstebanBustamante · Accepted solution]

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