fix(demo): improved the demo app

Author: AnthonyNahas

package-lock.json

@@ -45,6 +45,8 @@
     "@angular/platform-server": "~9.0.0",
     "@angular/router": "~9.0.0",
     "@nguniversal/express-engine": "^9.0.0",
+    "@ngx-translate/core": "^12.0.0",
+    "@ngx-translate/http-loader": "^4.0.0",
     "express": "^4.15.2",
     "ngx-markdown": "^8.2.2",
     "rxjs": "~6.5.4",

package.json

@@ -1,13 +1,21 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {InitExampleComponent} from './init-example/init-example.component';
 
 
-const routes: Routes = [];
+const routes: Routes = [
+  {path: '', component: InitExampleComponent},
+  {
+    path: 'examples',
+    loadChildren: () => import('src/app/examples/examples.module').then(m => m.ExamplesModule)
+  }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes, {
     initialNavigation: 'enabled'
-})],
+  })],
   exports: [RouterModule]
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {
+}

src/app/app-routing.module.ts

@@ -692,6 +692,8 @@ <h2>Usage</h2>
 
   <p>For more info, please read the official readme - see the links above GITHUB - DOCS - NPM</p>
 
+  <router-outlet></router-outlet>
+
   <!--  </div>-->
 
   <!-- Next Steps -->
@@ -714,7 +716,7 @@ <h2 style="margin-top: 4rem">Next Steps</h2>
         <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
       </svg>
 
-      <span>password-strength</span>
+      <span>fab-menu</span>
     </div>
 
     <div (click)="selection.value = 'dependency'" class="card card-small" tabindex="0">
@@ -745,7 +747,7 @@ <h2 style="margin-top: 4rem">Next Steps</h2>
   <!-- Terminal -->
   <div [ngSwitch]="selection.value" class="terminal">
     <pre *ngSwitchDefault>ng add ngx-auth-firebaseui</pre>
-    <pre *ngSwitchCase="'material'">ng add @angular-material-extensions/password-strength</pre>
+    <pre *ngSwitchCase="'material'">ng add @angular-material-extensions/fab-menu</pre>
     <pre *ngSwitchCase="'dependency'">ng add @angular-material-extensions/google-maps-autocomplete </pre>
     <pre *ngSwitchCase="'test'">ng add @angular-material-extensions/pages</pre>
     <pre *ngSwitchCase="'build'">ng add @angular-material-extensions/links-preview </pre>
@@ -872,5 +874,3 @@ <h2 style="margin-top: 4rem">Next Steps</h2>
 <!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
 <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
 
-
-<router-outlet></router-outlet>

src/app/app.component.html

@@ -16,17 +16,32 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {MarkdownModule} from 'ngx-markdown';
 import {HttpClient, HttpClientModule} from '@angular/common/http';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
+import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
+import {InitExampleComponent} from './init-example/init-example.component';
+
+export function createTranslateLoader(http: HttpClient) {
+  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+}
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    InitExampleComponent
   ],
   imports: [
     BrowserModule.withServerTransition({appId: 'serverApp'}),
     AppRoutingModule,
     BrowserAnimationsModule,
     HttpClientModule,
     MarkdownModule.forRoot({loader: HttpClient}),
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (createTranslateLoader),
+        deps: [HttpClient]
+      }
+    }),
     MatPasswordStrengthModule,
     FormsModule,
     ReactiveFormsModule,

src/app/app.module.ts

@@ -0,0 +1,14 @@
+import {RouterModule} from '@angular/router';
+import {NgModule} from '@angular/core';
+import {ExamplesComponent} from './examples.component';
+import {InfoCompExampleComponent} from './info-comp-example/info-comp-example.component';
+
+@NgModule({
+  imports: [RouterModule.forChild([
+    {path: '', component: ExamplesComponent},
+    {path: 'mat-password-strength-info', component: InfoCompExampleComponent},
+  ])],
+  exports: [RouterModule]
+})
+export class ExamplesRoutingModule {
+}