4

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

shaahin
  • 108
  • 1
  • 8

1 Answers1

2

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()

muetzerich
  • 5,600
  • 7
  • 37
  • 52
  • DynamicComponentLoader is deprecated, use instead `ViewContainerRef.createComponent` (see also http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468) – Günter Zöchbauer May 11 '16 at 05:16
  • thank you both, I will get back to you when I get the time to try these out. – shaahin May 11 '16 at 10:05