title: Best method to set different layout for different pages in angular 4
body: <p>I am new to angular 4. What I'm trying to achieve is to set different layout headers and footers for different pages in my app. I have three different cases:</p>
  
  <ol>
  <li>Login, register page (no header, no footer)</li>
  </ol>
  
  <p>routes: ['login','register']</p>
  
  <ol start="2">
  <li>Marketing site page (this is the root path and it has a header and footer, mostly these sections come before login)</li>
  </ol>
  
  <p>routes : ['','about','contact']</p>
  
  <ol start="3">
  <li>App logged in pages (I have a different header and footer in this section for all the app pages but this header and footer is different from the marketing site header and footer)</li>
  </ol>
  
  <p>routes : ['dashboard','profile']</p>
  
  <p>I run the app temporarily by adding a header and footer to my router component html.  </p>
  
  <p>Please advise me a better approach.</p>
  
  <p>This is my code:</p>
  
  <h2>app\app.routing.ts</h2>
  
  <pre><code>   const appRoutes: Routes = [
          { path: '', component: HomeComponent},
          { path: 'about', component: AboutComponent},
          { path: 'contact', component: ContactComponent},
          { path: 'login', component: LoginComponent },
          { path: 'register', component: RegisterComponent },
          { path: 'dashboard', component: DashboardComponent },
          { path: 'profile', component: ProfileComponent },
  
  
          // otherwise redirect to home
          { path: '**', redirectTo: '' }
      ];
  
      export const routing = RouterModule.forRoot(appRoutes);
  </code></pre>
  
  <h2>app.component.html</h2>
  
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <h2>app/home/home.component.html</h2>
  
  <pre><code>&lt;site-header&gt;&lt;/site-header&gt;
  &lt;div class="container"&gt;
      &lt;p&gt;Here goes my home html&lt;/p&gt;
  &lt;/div&gt;
  &lt;site-footer&gt;&lt;/site-footer&gt;
  </code></pre>
  
  <h2>app/about/about.component.html</h2>
  
  <pre><code>&lt;site-header&gt;&lt;/site-header&gt;
  &lt;div class="container"&gt;
      &lt;p&gt;Here goes my about html&lt;/p&gt;
  &lt;/div&gt;
  &lt;site-footer&gt;&lt;/site-footer&gt;
  </code></pre>
  
  <h2>app/login/login.component.html</h2>
  
  <pre><code>&lt;div class="login-container"&gt;
      &lt;p&gt;Here goes my login html&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>app/dashboard/dashboard.component.html</h2>
  
  <pre><code>&lt;app-header&gt;&lt;/app-header&gt;
  &lt;div class="container"&gt;
      &lt;p&gt;Here goes my dashboard html&lt;/p&gt;
  &lt;/div&gt;
  &lt;app-footer&gt;&lt;/app-footer&gt;
  </code></pre>
  
  <p>I saw <a href="https://stackoverflow.com/questions/40508557/multiple-layout-for-different-pages-in-angular-2">this question</a> on stack-overflow but i didn't get a clear picture from that answer </p>