Add routing to demo-app

Author: RFreij

projects/demo-app/src/app/app.component.html

@@ -1,5 +1,5 @@
 <mat-sidenav-container class="container">
-    <mat-sidenav #sidenav mode="side" [(opened)]="opened">
+    <mat-sidenav #sidenav mode="side" [(opened)]="opened" style="width: 15%">
         Sidenav content
     </mat-sidenav>
 
@@ -12,7 +12,6 @@
                 <h1>Ngx Mention</h1>
             </mat-toolbar-row>
         </mat-toolbar>
-        <app-static></app-static>
-        <app-async></app-async>
+        <router-outlet></router-outlet>
     </mat-sidenav-content>
 </mat-sidenav-container>

projects/demo-app/src/app/app.module.ts

@@ -7,12 +7,29 @@ import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterModule, Routes } from '@angular/router';
 import { NgxMentionModule } from 'projects/ngx-mention/src/lib/ngx-mention.module';
 import { environment } from '../environments/environment';
 import { AppComponent } from './app.component';
 import { AsyncComponent } from './async/async.component';
 import { StaticComponent } from './static/static.component';
 
+const routes: Routes = [
+    {
+        path: '',
+        redirectTo: 'static',
+        pathMatch: 'full',
+    },
+    {
+        path: 'static',
+        component: StaticComponent,
+    },
+    {
+        path: 'async',
+        component: AsyncComponent,
+    },
+];
+
 @NgModule({
     declarations: [AppComponent, AsyncComponent, StaticComponent],
     imports: [
@@ -24,6 +41,7 @@ import { StaticComponent } from './static/static.component';
         MatToolbarModule,
         MatIconModule,
         MatButtonModule,
+        RouterModule.forRoot(routes),
     ],
     providers: [
         {