0

Before anything else please know that I have spent hours researching this. I'm pretty new to angular so please excuse me if this question is not a good one.

So i'm working on a website.. In short there are two or three common layouts like most I want to implement. Having search up ive come across two methods listed in this following post.

Best method to set different layout for different pages in angular 4

I have also found others:

https://medium.com/angular-in-depth/angular-routing-reusing-common-layout-for-pages-from-different-modules-440a23f86b57 https://www.codamit.dev/reusable-layouts-in-angular

If you read down the post everyone seems to side with router and child routes for layout, however on this post there is a second solution using a component with "options" set in each feature component to choose whether to show a component such as the header or footer.

My question is what are the best methods but more importantly what are the trade offs or pros and cons to that method/solution.

For example I agree with the last post using the child routes to load layouts seems to go against the separation of concerns as routing should by delt with by the router and layouts/views should they not be handled by a module/component (shared) of its own? When implementing the child routes does this effect loading?

Advice and examples wanted please.. but not looking for repeats of this will work. I know it will work but I want to fully understand the trade off to a particular method.

Specifics to my case.

  • I have 4 main root level folders.
    • Core (Auth etc only thing you want single instances of)
    • Blocks (Holds feature components like pages, user-dashboard admin-dashboard etc etc)
    • Shared (Holds features including across the project like header, footer, toolbar etc)
    • Styles (Holds common global styles like theming, dark mode etc etc)

Common layouts - No Header footer (Full Page) - Dashboard - Header/content/footer - Footer Only/Header Only

Apart from that i'm pretty much working from a blank slate but I feel layouts and routing should be sorted before moving on. Once again any help appreciated :)

Jason Demitri
  • 1
  • I'd say this question is **Opinion-based**. – KaiserKatze Dec 30 '20 at 11:04
  • Im not looking for opinions tbf im looking for the explanations behind the given methods and trade offs. For example how would child routed effect any form of seo or angular-universal implementation or even history api? Its ok saying this is how I would do it but im looking for the why – Jason Demitri Dec 30 '20 at 11:11
  • `My question is what are the best methods ...` as you said, which would lead to Opinion-based answers IMHO. – KaiserKatze Dec 30 '20 at 11:12
  • I get what you mean but I'm not looking for the opinion, nearly the facts to make an informed decision which none of the answers provide and being relatively new to angular I domt want to get half way through to find out for example the routing method will give issues to something else or Visa versa. Personally my opinion sits with the component method to keep to single responsibility principles but once again being newbie am I missing future trade offs. – Jason Demitri Dec 30 '20 at 11:30

0 Answers0