How to display my component next to side bar on click of menu from sidenav in angular 8 and angular material

Question

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

Link of stackblitz My_link

I have 3 components apart from App component

1. Header Component
2. Sidebar Component
3. LinkContent Component

SidebarCompoment.html

<div style="height: 100vh;">
<mat-sidenav-container>
    <mat-sidenav #sidenav>
    <!--   # [(opened)]="opened" mode="side" (opened)="log('Opened')" 
      (closed)="log('Closed')" --> 
    <div class="dropdown">  
    <button  [matMenuTriggerFor]="animals"  class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Animal index</button>
 </div>

    <mat-menu #animals="matMenu">
      <button mat-menu-item [matMenuTriggerFor]="vertebrates" (click)="setflag()"><a [routerLink]="'/link1'">Vertebrates</a></button>
      <button mat-menu-item [matMenuTriggerFor]="invertebrates">Invertebrates</button>
    </mat-menu>
   </mat-sidenav>  
  <mat-sidenav-content>
      <button  class="fa fa-list fa-2x" (click)="sidenav.toggle()"></button>
 </mat-sidenav-content>
 </mat-sidenav-container>
</div>

SidebarComponent.css

mat-sidenav-container {
height: 100vh;
background-color: white;

  }

  mat-sidenav, mat-sidenav-content {
    padding: 16px;

  }

  mat-sidenav {
    background-color: black;
    width: 300px;
  }

app-routing.module.ts

const routes: Routes = [

  { path: '', component: AppComponent},
  { path: 'link1', component: LinkContentComponent},
  { path: 'link2', component: LinkContentComponent}

];

app.component.html

<app-header></app-header>
<app-sidebar></app-sidebar>
<router-outlet></router-outlet>

Also I am providing link to stackblitz Stackblitz-link

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

Answer 1

As I went to you Link of stackblitz i can see you have your router outlet in app.component.html.So what you can do is add your router outlet in sidebar.component.html like this

Sidebar.component.html

<div style="height: 100vh;">
<mat-sidenav-container>
    <mat-sidenav #sidenav>
    <!--   # [(opened)]="opened" mode="side" (opened)="log('Opened')" 
      (closed)="log('Closed')" --> 
    <div class="dropdown">  
    <button  [matMenuTriggerFor]="animals"  class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Animal index</button>
 </div>

    <mat-menu #animals="matMenu">
      <button mat-menu-item [matMenuTriggerFor]="vertebrates" (click)="setflag()"><a [routerLink]="'/link1'">Vertebrates</a></button>
      <button mat-menu-item [matMenuTriggerFor]="invertebrates">Invertebrates</button>
    </mat-menu>
   </mat-sidenav>  
  <mat-sidenav-content>

<!-- Adding router-outtlet here        -->

<router-outlet></router-outlet>

      <button  class="fa fa-list fa-2x" (click)="sidenav.toggle()"></button>
 </mat-sidenav-content>
 </mat-sidenav-container>
</div>