feat(ngx-material-pages): supporting lazy loading for each page

Author: AnthonyNahas

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

@@ -21,12 +21,14 @@
     </mat-toolbar>
     <div class="demo-sidenav-content main-container">
 
-      <mat-tab-group [selectedIndex]="index" style="min-height: 15vh;" class="hide-deep">
+      <mat-tab-group [selectedIndex]="index" style="min-height: 15vh;" >
         <button mat-fab color="warn" (click)="previous()">
           <mat-icon>location</mat-icon>
         </button>
-        <mat-tab *ngFor="let page of pages;let i = index;" class="test124">
-          <ng-container [ngTemplateOutlet]="page.pageContent.content"></ng-container>
+        <mat-tab *ngFor="let page of pages;let i = index;">
+          <ng-template matTabContent>
+            <ng-container [ngTemplateOutlet]="page.pageContent.content"></ng-container>
+          </ng-template>
         </mat-tab>
       </mat-tab-group>
 

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

@@ -88,6 +88,10 @@ export class NgxMaterialPagesComponent implements OnInit, AfterContentInit {
   next() {
     this.index = this.index === this.totalPages - 1 ? this.totalPages - 1 : ++this.index;
     this.pageChanged.emit(this.index);
+
+    if (this.index === this.totalPages - 1) {
+      this.done.emit();
+    }
   }
 
 
@@ -97,6 +101,7 @@ export class NgxMaterialPagesComponent implements OnInit, AfterContentInit {
    *
    */
   onStepSelectionChange(event: StepperSelectionEvent) {
+    console.log('onStepSelectionChanged');
     this.index = event.selectedIndex;
     this.pageChanged.emit(this.index);
   }