0

I'm new to angular and I have the application root call multiple components, but on separate routes, I don't want to call all of the main components on the application root, just specific ones like a navbar and footer that should be loaded on every page.

app.component.html

<body>
    <navbar-component></navbar-component>
    <component-a></component-a> // when the a different route is hit (eg. /login), don't load 
    <component-b></component-b> // components a, b, c, but load the navbar and footer components
    <component-c></component-c>
    <router-outlet></router-outlet>
    <footer-component></footer-component>
</body>
Vorpal56
  • 51
  • 2

1 Answers1

0

As per my research you can follow this URL Why other components not showing up on index.html without <app-root>? to call multiple components in index.html file but while following this approach you don't have much control over conditions like the login one that you mentioned above.

Angular has a particular structure that is described in the angular styling guide i.e., (practice to redistribute the component) that simplifies the development, and it is the reason angular is.

Here is a link of project https://github.com/aamita96/media-company that follows a good structure of project and hope that solve your problem.

Amit Khatri
  • 29
  • 7