title: How to show components in the content area of home component instead of separate page in Angular 5
body: <p>I am new to Angular 5 ,Here I am facing a problem with component routing .</p>
  
  <p>What I want to do is ,When a user open the app first it should show a <strong>login screen</strong> (login screen with full height and width of browser window).Once the user is successfully validated then the user get into the <strong>Home Component</strong>.</p>
  
  <p>Here Home component has Toolbar and Side menu bar ,If user selected any any from side menu bar I want to show the relevant(component) data in the content area of the home component.</p>
  
  <p>As of now everything works fine ,I mean when user opens the app login screen first displayed and successfully validated Home page displayed to the user .</p>
  
  <p><strong>Problem occurs when user select any menu from side menu bar the respected component not showing in the content area of the Home component ,it opens as a separate component and takes full screen.</strong></p>
  
  <p>home.component.ts</p>
  
  <pre><code> &lt;mat-sidenav-container class="sidenav-container"&gt;
  
        &lt;mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
          [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)" style="background:black"&gt;
          &lt;mat-toolbar class="menuBar"&gt;Menus&lt;/mat-toolbar&gt;
          &lt;mat-nav-list&gt;
            &lt;a class="menuTextColor" mat-list-item routerLink="/settings"&gt;Link 1&lt;/a&gt;
          &lt;/mat-nav-list&gt;
        &lt;/mat-sidenav&gt;
  
        &lt;mat-sidenav-content&gt;
          &lt;mat-toolbar class="toolbar"&gt;
            &lt;button class="menuTextColor" type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()"
              *ngIf="isHandset$ | async"&gt;
              &lt;mat-icon aria-label="Side nav toggle icon"&gt;menu&lt;/mat-icon&gt;
            &lt;/button&gt;
            &lt;span class="toolbarHeading"&gt;Application Title&lt;/span&gt;
          &lt;/mat-toolbar&gt;
  
  //Content area ,need to show the components related to the side menu
  
        &lt;/mat-sidenav-content&gt;
  
      &lt;/mat-sidenav-container&gt;
  </code></pre>
  
  <p>app.components.ts</p>
  
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>In app.component.ts I have the </p>
  
  <p>app.module.ts</p>
  
  <pre><code>const routings: Routes = [
      { path: '', redirectTo: '/login', pathMatch: 'full' },
      { path: 'login', component: LoginComponent },
      { path: 'home', component: HomeComponent },
      { path: 'settings', component: SettingsComponent },
      { path: '**', redirectTo: '/login', pathMatch: 'full' },
  ];
  </code></pre>
  
  <p>here I have defined the routes .</p>
  
  <p>can anyone help me to fix this .</p>