Multiple layouts for different pages in Angular 2
<p>I have a login page - just 2 input (no header, no footer, no sidebar)</p>
<p>When a user signs in he should be navigated to a page with header, footer and right navbar.</p>
<p>the only thing that changes on the inner page is the right side content.</p>
<pre class="lang-ts prettyprint-override"><code>import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'pm-app',
  template: `
  &lt;div&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
   &lt;/div&gt;
   `,
   styleUrls:[&quot;app/app.component.css&quot;],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  pageTitle: string = 'Acme Product Management';
}
</code></pre>
<p>I understand this <code>app.component</code> is like master page where you can add the header and footer and the <code>&lt;router-outlet&gt;&lt;/router-outlet&gt;</code> is where the content changes based on the routing.</p>
<p>How do I make one layout for the login page and another layout with header, footer and right sidebar for the inside page?</p>