feat(ngx-material-pages): added synchronization between the page content and outlook

Author: AnthonyNahas

src/module/components/ngx-material-pages/ngx-material-pages.component.html

@@ -5,7 +5,7 @@
     <mat-toolbar color="primary">
     </mat-toolbar>
 
-    <mat-vertical-stepper>
+    <mat-vertical-stepper [selectedIndex]="index" (selectionChange)="onStepSelectionChange($event)">
       <mat-step *ngFor="let page of pages;let i = index;">
         <ng-container [ngTemplateOutlet]="page.pageOutlook.content"></ng-container>
       </mat-step>

src/module/components/ngx-material-pages/ngx-material-pages.component.ts

@@ -9,6 +9,7 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 import {NgxMaterialPageLoaderComponent} from './ngx-material-page-loader/ngx-material-page-loader.component';
+import {StepperSelectionEvent} from '@angular/cdk/stepper';
 
 @Component({
   selector: 'ngx-material-pages',
@@ -21,14 +22,45 @@ export class NgxMaterialPagesComponent implements OnInit, AfterContentInit {
 
   @ContentChildren(NgxMaterialPageLoaderComponent) pages: QueryList<NgxMaterialPageLoaderComponent>;
 
+  // current page
+  index: number;
+
+  // the total number of pages to render
+  totalPages: number;
+
   constructor() {
+    this.index = 0;
   }
 
   ngOnInit() {
   }
 
   ngAfterContentInit() {
     console.log('pagesOutlook', this.pages);
+    this.totalPages = this.pages.length;
+  }
+
+  /**
+   * Go to the previous page if it exists
+   */
+  previous() {
+    console.log('index before', this.index);
+    this.index = this.index === 0 ? 0 : --this.index;
+    console.log('index after', this.index);
+  }
+
+  /**
+   * Go to the next page if it exists
+   */
+  next() {
+    console.log('index before', this.index);
+    this.index = this.index === this.totalPages - 1 ? this.totalPages - 1 : ++this.index;
+    console.log('index after', this.index);
+  }
+
+  onStepSelectionChange(event: StepperSelectionEvent) {
+    console.log('event = ', event);
+    this.index = event.selectedIndex;
   }
 
 }