Added audio navLink

test-Angular - Copy/src/app/app-routing.module.ts

 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { AudioComponent } from './audio/audio.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { HomeComponent } from './home/home.component';
 
 const routes: Routes = [
   {path:'',redirectTo:'home',pathMatch:'full'},
   {path:'home',component:HomeComponent},
-  {path:'dashboard',component:DashboardComponent}
+  {path:'dashboard',component:DashboardComponent},
+  {path:'audio',component:AudioComponent}
 ];
 
 @NgModule({

test-Angular - Copy/src/app/app.module.ts

@@ -14,6 +14,7 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatIconModule } from '@angular/material/icon';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatListModule } from '@angular/material/list';
+import { AudioComponent } from './audio/audio.component';
 
 @NgModule({
   declarations: [
@@ -21,7 +22,8 @@ import { MatListModule } from '@angular/material/list';
     HeaderComponent,
     SidenavComponent,
     HomeComponent,
-    DashboardComponent
+    DashboardComponent,
+    AudioComponent
   ],
   imports: [
     BrowserModule,

test-Angular - Copy/src/app/audio/audio.component.css

+@import url(../home/home.component.css);
\ No newline at end of file

test-Angular - Copy/src/app/audio/audio.component.html

+<div class="container-fluid page">
+    <div class="d-flex page__box p-3 mt-2">Home</div>
+    <div class="page__content shadow p-3 position-relative">
+      <div class="page__content-data position-absolute">
+        Audio Content Goes Here
+      </div>
+    </div>
+  </div>

test-Angular - Copy/src/app/audio/audio.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AudioComponent } from './audio.component';
+
+describe('AudioComponent', () => {
+  let component: AudioComponent;
+  let fixture: ComponentFixture<AudioComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AudioComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AudioComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

test-Angular - Copy/src/app/audio/audio.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-audio',
+  templateUrl: './audio.component.html',
+  styleUrls: ['./audio.component.css']
+})
+export class AudioComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

test-Angular - Copy/src/app/sidenav/sidenav.component.html

@@ -10,7 +10,8 @@
       <a mat-list-item routerLinkActive="list-item-active" routerLink="/dashboard">
         <mat-icon>dashboard</mat-icon> Dashboard
       </a>
-      <a mat-list-item> <mat-icon>edit</mat-icon> Link 3 </a>
+      <a mat-list-item routerLinkActive="list-item-active" routerLink="/audio">
+         <mat-icon>mic</mat-icon> Audio Recognition </a>
       <a mat-list-item> <mat-icon>edit</mat-icon> Link 4 </a>
       <a mat-list-item> <mat-icon>edit</mat-icon> Link 5 </a>
       <a mat-list-item> <mat-icon>edit</mat-icon> Link 6 </a>