title: issue in angular nav bar with routing
body: <p>I am working on sidenavbar in angular i have set path in app-routing.module.ts and gave the routing path to my nav bar but im not able to load the content from add-emp.component.html can anyone help me fix this ? and thank you in advance</p>
  <p><strong>code</strong> <br>
  app-routing.module.ts <br></p>
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { AddEmpComponent } from './components/add-emp/add-emp.component';
  
  
  
  const routes: Routes = [
    
    { path: 'add', component: AddEmpComponent}
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  <br>
  main-nav.component.html<br>
  <pre><code>  &lt;mat-sidenav-container class=&quot;sidenav-container&quot;&gt;
    &lt;mat-sidenav #drawer class=&quot;sidenav&quot; fixedInViewport
        [attr.role]=&quot;(isHandset$ | async) ? 'dialog' : 'navigation'&quot;
        [mode]=&quot;(isHandset$ | async) ? 'over' : 'side'&quot;
        [opened]=&quot;(isHandset$ | async) === false&quot;&gt;
      &lt;mat-toolbar&gt;Menu&lt;/mat-toolbar&gt;
      &lt;mat-nav-list&gt;
        &lt;a mat-list-item [routerLink]=&quot;['/add']&quot;&gt;add&lt;/a&gt;
      
     &lt;/mat-nav-list&gt;
    &lt;/mat-sidenav&gt;
    &lt;mat-sidenav-content&gt;
      &lt;mat-toolbar color=&quot;primary&quot;&gt;
        &lt;button
          type=&quot;button&quot;
          aria-label=&quot;Toggle sidenav&quot;
          mat-icon-button
          (click)=&quot;drawer.toggle()&quot;
          *ngIf=&quot;isHandset$ | async&quot;&gt;
          &lt;mat-icon aria-label=&quot;Side nav toggle icon&quot;&gt;menu&lt;/mat-icon&gt;
        &lt;/button&gt;
        &lt;span&gt;navform&lt;/span&gt;
      &lt;/mat-toolbar&gt;
      &lt;!-- Add Content Here --&gt;
    &lt;/mat-sidenav-content&gt;
  &lt;/mat-sidenav-container&gt;
  </code></pre>