Angular Router Course

Author: Your Name

src/app/app-routing.module.ts

@@ -5,6 +5,7 @@ import {AboutComponent} from './about/about.component';
 import {PageNotFoundComponent} from './page-not-found/page-not-found.component';
 import {CanLoadAuthGuard} from './services/can-load-auth.guard';
 import {CustomPreloadingStrategy} from './services/custom-preloading.strategy';
+import {ChatComponent} from './chat/chat.component';
 
 
 const routes: Routes = [
@@ -30,6 +31,11 @@ const routes: Routes = [
         path: "about",
         component: AboutComponent
     },
+    {
+        path: 'helpdesk-chat',
+        component: ChatComponent,
+        outlet: 'chat'
+    },
     {
         path: "**",
         component: PageNotFoundComponent

src/app/app.component.html

@@ -24,7 +24,8 @@
 
     </div>
 
-    <a mat-button class="menu-item" *ngIf="auth.isLoggedIn$ | async">
+    <a mat-button class="menu-item" *ngIf="auth.isLoggedIn$ | async"
+        [routerLink]="[{outlets: {chat: ['helpdesk-chat']}}]">
       <mat-icon>help</mat-icon>
     </a>
 
@@ -54,3 +55,12 @@
 
 </mat-sidenav-container>
 
+<router-outlet name="chat"></router-outlet>
+
+
+
+
+
+
+
+

src/app/chat/chat.component.css

@@ -2,7 +2,7 @@
 
 .chat-container {
   position: fixed;
-  bottom: 10px;
+  bottom: 70px;
   right: 10px;
   height: 300px;
   width: 500px;