Check if this.paginator is defined.

hide its div to avoid undefined this.paginator as per angular/components#10205 (comment)
Tangerine-Community · Jul 31, 2018 · 47bb93c · 47bb93c
1 parent 9c3e783
commit 47bb93c
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 37 deletions.
diff --git a/client/app/src/app/class/dashboard/dashboard.component.html b/client/app/src/app/class/dashboard/dashboard.component.html
@@ -30,48 +30,41 @@
               <!--</a>-->
             <!--</mat-list-item>-->
         </mat-list>
-        <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+        <div [hidden]="isLoading">
+          <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
 
-          <ng-container matColumnDef="Name">
-            <th mat-header-cell *matHeaderCellDef> Student </th>
-            <td mat-cell *matCellDef="let element"> {{element["name"]}} </td>
-          </ng-container>
+            <ng-container matColumnDef="Name">
+              <th mat-header-cell *matHeaderCellDef> Student </th>
+              <td mat-cell *matCellDef="let element"> {{element["name"]}} </td>
+            </ng-container>
 
-          <ng-container [matColumnDef]="column" *ngFor="let column of formColumns;let i=index" >
-            <th mat-header-cell *matHeaderCellDef> {{column}} </th>
-            <!--<td mat-cell *matCellDef="let element">{{element["id"]}} <br/>{{element["name"]}}</td>-->
-            <!--(change)="$event ? selection.toggle(column) : null"-->
-
-            <td mat-cell *matCellDef="let element,i">
-              <!--<span *ngIf="!element['forms'][i]['response'] ">-->
-              <!--<mat-checkbox (click)="$event.stopPropagation()"-->
-                            <!--(change)="$event ? selectCheckbox(element,i) : null"-->
-                            <!--[checked]="selection.isSelected(element)">-->
-              <!--</mat-checkbox>-->
-              <!--</span>-->
+            <ng-container [matColumnDef]="column" *ngFor="let column of formColumns;let i=index" >
+              <th mat-header-cell *matHeaderCellDef> {{column}} </th>
+              <td mat-cell *matCellDef="let element,i">
               <span *ngIf="!element['forms'][i]['response'] || element['forms'][i]['response']?.itemCount == 0 ">
               <mat-checkbox (click)="$event.stopPropagation()"
                             (change)="$event ? selectCheckbox(element,i) : null"
                             [checked]="selection.isSelected(element)">
               </mat-checkbox>
               </span>
-              <span *ngIf="element['forms'][i]['response']?.itemCount > 0 ">
+                <span *ngIf="element['forms'][i]['response']?.itemCount > 0 ">
                 <mat-checkbox (click)="$event ? selectCheckboxResult(element,i) : null"
-                [checked]="true"
-                [disabled]="true">
+                              [checked]="true"
+                              [disabled]="true">
               </mat-checkbox>
               </span>
-            </td>
-          </ng-container>
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
+            <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
+          </table>
+          <mat-paginator [length]="pageLength"
+                         [pageSize]="pageSize"
+                         [pageSizeOptions]="pageSizeOptions">
+          </mat-paginator>
+        </div>
 
-          <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
-          <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
-        </table>
-        <!--<span>curriculumFormsList: {{curriculumFormsList?.length}}</span>-->
-        <mat-paginator [length]="pageLength"
-                       [pageSize]="pageSize"
-                       [pageSizeOptions]="pageSizeOptions">
-        </mat-paginator>
       </mat-card>
     </ng-template>
   </mat-tab>

diff --git a/client/app/src/app/class/dashboard/dashboard.component.ts b/client/app/src/app/class/dashboard/dashboard.component.ts
@@ -48,13 +48,20 @@ export class DashboardComponent implements OnInit {
   classRegistrationParams = {
     curriculum:"class-registration"
   }
+  isLoading;
   // selected = new FormControl(0);
 
   // MatPaginator Output
   // pageEvent: PageEvent;
+  private paginator: MatPaginator;
 
   @ViewChild('container') container: ElementRef;
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  // @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
+    this.paginator = mp;
+    console.log("Set this.paginator")
+    // this.setDataSourceAttributes();
+  }
 
   constructor(
     private http: HttpClient,
@@ -227,12 +234,15 @@ export class DashboardComponent implements OnInit {
       // this.columnsToDisplay.push(formEl);
     }
     this.formColumnsDS = new MatTableDataSource(this.formColumns);
-    this.paginator.page
-      .pipe(
-        tap(() => this.loadGrid())
-      )
-      .subscribe();
-
+    if (this.paginator) {
+      this.paginator.page
+        .pipe(
+          tap(() => this.loadGrid())
+        )
+        .subscribe();
+    } else {
+      console.log("this.paginator is not defined.")
+    }
 
     this.dataSource = new MatTableDataSource<StudentResult>(this.allStudentResults);
     // this.dataSource.paginator = this.paginator;