fix(demo): updated the dialogs route

Author: AnthonyNahas

demo/src/app/features/dialogs/dialogs.component.html

@@ -1,5 +1,30 @@
+<div class="jumbotron jumbotron-fluid">
+  <div class="container">
+    <div class="row">
+      <div class="col-sm-4 d-flex justify-content-center justify-content-md-end">
+        <img src="assets/logo.svg" alt="core logo" class="logo">
+      </div>
+      <div class="col-sm-8 text-center text-md-left">
+        <h1>MatDialogsModule</h1>
+        <p>Beautiful prebuilt material dialogs</p>
+        <p>Scroll down to see it in action!</p>
+        <p class="buttons">
+          <a class="btn btn-outline-primary btn-lg" href="https://github.com/angular-material-extensions/core"
+             target="_blank"><i class="fa fa-github fa-lg"></i> Code on Github</a>
+          <a class="btn btn-outline-primary btn-lg" href="doc/index.html" target="_blank"><i
+            class="fa fa-book fa-lg"></i> Documentation</a>
+          <a class="btn btn-outline-primary btn-lg" href="#" (click)="editOnStackBlitz()"><i
+            class="fa fa-bolt fa-lg"></i> Edit on StackBlitz</a>
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+
 <div [fxHide]="shouldHide" class="container">
 
+  <markdown src="assets/md/dialogs/INSTALLATION.md"></markdown>
+
   <mat-card class="example-card">
     <mat-card-title>Material Alert Dialog (Default)</mat-card-title>
     <mat-card-content fxLayout="column" fxLayoutAlign="center center">

demo/src/app/features/dialogs/dialogs.component.ts

@@ -14,6 +14,7 @@ import {
   MatSelectDialogData
 } from '@angular-material-extensions/core';
 import {MatDialog} from '@angular/material';
+import sdk from '@stackblitz/sdk';
 
 @Component({
   selector: 'app-dialogs',
@@ -56,6 +57,10 @@ export class DialogsComponent implements OnInit {
   ngOnInit() {
   }
 
+  editOnStackBlitz() {
+    sdk.openGithubProject('angular-material-extensions/core/tree/master/demo');
+  }
+
   openAlertDialog(matAlertDialogData: MatAlertDialogData) {
     this.shouldHide = true;
     this.dialog

demo/src/app/home/home.component.html

@@ -5,7 +5,7 @@
         <img src="assets/logo.svg" alt="core logo" class="logo">
       </div>
       <div class="col-sm-8 text-center text-md-left">
-        <h1>core</h1>
+        <h1>@angular-material-extensions/core</h1>
         <p>Set of components, directives and services to boost the app development with angular material 2</p>
         <p>Scroll down to see it in action!</p>
         <p class="buttons">
@@ -18,7 +18,6 @@ <h1>core</h1>
         </p>
       </div>
     </div>
-
   </div>
 </div>
 

demo/src/app/home/home.component.ts

@@ -19,7 +19,7 @@ export class HomeComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.titleService.setTitle('Home | core');
+    this.titleService.setTitle('@angular-material-extensions/core');
   }
 
   editOnStackBlitz() {

demo/src/app/home/home.module.ts

@@ -2,20 +2,20 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {HomeRoutingModule} from './home-routing.module';
 import {HomeComponent} from './home.component';
-import {MatDialogsModule} from '@angular-material-extensions/core';
+import {MatCoreModule, MatDialogsModule} from '@angular-material-extensions/core';
 import {MatButtonModule, MatCardModule, MatDialogModule} from '@angular/material';
-import { MatLanguageMenuComponent } from '../../../../src/module/components/mat-language-menu/mat-language-menu.component';
 
 @NgModule({
   imports: [
     CommonModule,
     HomeRoutingModule,
+    MatCoreModule,
     MatDialogsModule,
     MatDialogModule,
     MatButtonModule,
     MatCardModule
   ],
-  declarations: [HomeComponent, MatLanguageMenuComponent],
+  declarations: [HomeComponent],
 })
 export class HomeModule {
 }

demo/src/assets/md/dialogs/INSTALLATION.md

@@ -0,0 +1,33 @@
+# Installation
+
+install `@angular-material-extensions/core` via:
+```shell
+npm install --save @angular-material-extensions/core
+```
+
+## Import the library
+
+Once installed you need to import the main module:
+```js
+import { MatDialogsModule } from '@angular-material-extensions/core';
+```
+The only remaining part is to list the imported module in your application module. The exact method will be slightly
+different for the root (top-level) module for which you should end up with the code similar to (notice ` MatPasswordStrengthModule .forRoot()`):
+```js
+import { MatDialogsModule } from '@angular-material-extensions/core';
+import { MatDialogModule } from '@angular/material';
+
+@NgModule({
+  declarations: [AppComponent, ...],
+  imports: [
+    MatDialogsModule,
+    MatDialogModule,
+     ...],  
+  bootstrap: [AppComponent]
+})
+export class AppModule {
+  
+  constructor(public dialog: MatDialog) {
+    }
+}
+```