title: Angular 2, Routing, multiple master Layout
body: <p>I have a question about how to have multiple master layout in angular2.</p>
  
  <p>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 <a href="http://mywebsite.com/.." rel="nofollow">http://mywebsite.com/..</a>.)</p>
  
  <p>also it has an admin section (this one has its own separate layout and its url is <a href="http://mywebsite.com/admin/.." rel="nofollow">http://mywebsite.com/admin/..</a>.)</p>
  
  <p>now the question is that if in app.ts file I define the routes and the template for the page like:</p>
  
  <pre><code>&lt;div&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>then I have to put every layout related components in every subsequent child component like this(<a href="http://mywebsite.com/products" rel="nofollow">http://mywebsite.com/products</a>)</p>
  
  <pre><code>&lt;my-nav&gt;&lt;/my-nav&gt;
  &lt;my-sidebar&gt;&lt;/my-sidebar&gt;
  &lt;div class="content"&gt;
      &lt;!-- actual content of this component --&gt;
  &lt;/div&gt;
  &lt;footer&gt;&lt;/footer&gt;
  </code></pre>
  
  <p>and again for <a href="http://mywebsite.com/customers" rel="nofollow">http://mywebsite.com/customers</a>, same html markup.</p>
  
  <p>then again i would need a </p>
  
  <pre><code>&lt;my-admin-nav&gt;&lt;/my-admin-nav&gt;
   ...
  </code></pre>
  
  <p>for admin layout all over again.</p>
  
  <p>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</p>