website creation

Forum|Forum|1 year ago
July 1, 2024
2 replies
1209 views

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?

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 EstebanBustamante

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-headless/spa-editor/angular/navigation-routing and the code https://github.com/adobe/aem-guides-wknd-spa/tree/Angular/navigation-routing-solution

h_kataria

Community Advisor

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/page-editor/style-system
Sample for AEM's core navigation component
https://experienceleague.adobe.com/en/docs/experience-manager-core-components/using/wcm-components/navigation#styles-tab-edit

E

ElvisRoAuthor

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

EstebanBustamante

Community Advisor and Adobe Champion

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-develop/project-archetype/client-side-libraries

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/developing/hybrid/getting-started-angular

https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-with-aem-headless/spa-editor/angular/overview

Hope this helps

Esteban Bustamante