CODEWITHSUNDEEP
angularangular-routing
shaahin
shaahin

Reputation: 108

Angular 2, Routing, multiple master Layout

I have a question about how to have multiple master layout in angular2.

for example: my website has 2 sections, first is the front end (which users can see, it has its own master layout and its url is http://mywebsite.com/...)

also it has an admin section (this one has its own separate layout and its url is http://mywebsite.com/admin/...)

now the question is that if in app.ts file I define the routes and the template for the page like:

<div>
    <router-outlet></router-outlet>
</div>

then I have to put every layout related components in every subsequent child component like this(http://mywebsite.com/products)

<my-nav></my-nav>
<my-sidebar></my-sidebar>
<div class="content">
    <!-- actual content of this component -->
</div>
<footer></footer>

and again for http://mywebsite.com/customers, same html markup.

then again i would need a 

<my-admin-nav></my-admin-nav>
 ...

for admin layout all over again.

so basically my question is how can I over come this? or probably I am thinking totally wrong, please guide me in a better direction. thanks

Upvotes: 4

Views: 2646

Answers (1)

muetzerich
muetzerich

Reputation: 5720

There are several ways to switch between components:

1) Use ngSwitch to switch between the <my-nav></my-nav> and <my-admin-nav></my-admin-nav> components. Docs: https://angular.io/docs/ts/latest/api/common/NgSwitch-directive.html

2) Use ViewContainerRef.createComponent()

Upvotes: 2

Related Questions