title: How to display my component next to side bar on click of menu from sidenav in angular 8 and angular material
body: <p>I am working on Angular 8 and Angular material but I am stuck at a point where I want to display my content or(component) next to sidenav i.e is main screen when any link from side menu is clicked.Here is piece of my code</p>
  
  <p>Link of stackblitz <a href="https://stackblitz.com/github/mehulk05/Angular-Sidenav" rel="nofollow noreferrer">My_link</a></p>
  
  <p>I have 3 components apart from App component</p>
  
  <ol>
  <li>Header Component</li>
  <li>Sidebar Component</li>
  <li>LinkContent Component</li>
  </ol>
  
  <p><strong>SidebarCompoment.html</strong></p>
  
  <pre><code>&lt;div style="height: 100vh;"&gt;
  &lt;mat-sidenav-container&gt;
      &lt;mat-sidenav #sidenav&gt;
      &lt;!--   # [(opened)]="opened" mode="side" (opened)="log('Opened')" 
        (closed)="log('Closed')" --&gt; 
      &lt;div class="dropdown"&gt;  
      &lt;button  [matMenuTriggerFor]="animals"  class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;Animal index&lt;/button&gt;
   &lt;/div&gt;
  
      &lt;mat-menu #animals="matMenu"&gt;
        &lt;button mat-menu-item [matMenuTriggerFor]="vertebrates" (click)="setflag()"&gt;&lt;a [routerLink]="'/link1'"&gt;Vertebrates&lt;/a&gt;&lt;/button&gt;
        &lt;button mat-menu-item [matMenuTriggerFor]="invertebrates"&gt;Invertebrates&lt;/button&gt;
      &lt;/mat-menu&gt;
     &lt;/mat-sidenav&gt;  
    &lt;mat-sidenav-content&gt;
        &lt;button  class="fa fa-list fa-2x" (click)="sidenav.toggle()"&gt;&lt;/button&gt;
   &lt;/mat-sidenav-content&gt;
   &lt;/mat-sidenav-container&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>SidebarComponent.css</strong></p>
  
  <pre><code>mat-sidenav-container {
  height: 100vh;
  background-color: white;
  
    }
  
    mat-sidenav, mat-sidenav-content {
      padding: 16px;
  
    }
  
    mat-sidenav {
      background-color: black;
      width: 300px;
    }
  </code></pre>
  
  <p><strong>app-routing.module.ts</strong></p>
  
  <pre><code>const routes: Routes = [
  
    { path: '', component: AppComponent},
    { path: 'link1', component: LinkContentComponent},
    { path: 'link2', component: LinkContentComponent}
  
  ];
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>
  &lt;app-header&gt;&lt;/app-header&gt;
  &lt;app-sidebar&gt;&lt;/app-sidebar&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>Also I am providing link to stackblitz
  <a href="https://stackblitz.com/github/mehulk05/Angular-Sidenav" rel="nofollow noreferrer">Stackblitz-link</a></p>
  
  <p><a href="https://i.stack.imgur.com/dCrIt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dCrIt.png" alt="Myoutput screen"></a></p>
  
  <p>So here my question is When I Click any link from side menu I want to load the LinkContent Component in main screen very next to side menu and just below the header .So how should i do that.Right now when i Click on link the component is loaded below the Sidebar component as shown in figure.Any help will be appreciated</p>
  
  <p><a href="https://i.stack.imgur.com/PElM9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PElM9.png" alt="This is output I am getting"></a></p>