xxxxxxxxxx1
<table mdbTable #mdbTable="mdbTable" hover="true" bordered="true" class="z-depth-1">2
<thead>3
<tr>4
<th [mdbTableSort]="certificateTemplates" sortBy="type">Type5
<mdb-icon fas icon="sort"></mdb-icon>6
</th>7
</tr>8
</thead>9
<tbody>10
<tr *ngFor="let el of certificateTemplates; let i = index">11
<td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{el.type}}</td>12
</tr>13
</tbody>14
<tfoot class="grey lighten-5 w-100">15
<tr>16
<td colspan="5">17
<mdb-table-pagination #mdbTablePagination [tableEl]="mdbTable"18
[searchDataSource]="certificateTemplates"></mdb-table-pagination>19
</td>20
</tr>21
</tfoot>22
</table>23
<table mdbTable #certificateTable="mdbTable" hover="true" bordered="true" class="z-depth-1">24
<thead>25
<tr>26
<th [mdbTableSort]="certificates">Select27
</th>28
</tr>29
</thead>30
<tbody>31
<tr *ngFor="let certificate of certificates; let i = index">32
<td *ngIf="i+1 >= certificatePagination.firstItemIndex && i < certificatePagination.lastItemIndex"><input type="checkbox"/></td>33
</tr>34
</tbody>35
<tfoot class="grey lighten-5 w-100">36
<tr>37
<td colspan="11">38
<mdb-table-pagination #certificatePagination [tableEl]="certificateTable"39
[searchDataSource]="certificates"></mdb-table-pagination>40
</td>41
</tr>42
</tfoot>43
</table>44
1
1
xxxxxxxxxx1
import { Component } from '@angular/core';2
3
@Component({4
selector: 'app-root',5
templateUrl: './app.component.html',6
styleUrls: ['./app.component.scss']7
})8
export class AppComponent implements AfterViewInit {9
title = 'app';10
certificates: CertificateModel[] = [];11
previousCertificates: CertificateModel[] = [];12
certificateTemplates: any = [];13
previous: any = [];14
@ViewChild(MdbTableDirective, {static: true}) certificateTable: MdbTableDirective;15
@ViewChild(MdbTablePaginationComponent, {static: true}) certificatePagination: MdbTablePaginationComponent;16
@ViewChild(MdbTablePaginationComponent, {static: true}) mdbTablePagination: MdbTablePaginationComponent;17
@ViewChild(MdbTableDirective, {static: true}) mdbTable: MdbTableDirective;18
19
constructor(cdRef: ChangeDetectorRef, fb: FormBuilder){20
21
}22
23
ngAfterViewInit() {24
25
this.mdbTablePagination.setMaxVisibleItemsNumberTo(5);26
this.mdbTablePagination.calculateFirstItemIndex();27
this.mdbTablePagination.calculateLastItemIndex();28
29
this.certificatePagination.setMaxVisibleItemsNumberTo(5);30
this.certificatePagination.calculateFirstItemIndex();31
this.certificatePagination.calculateLastItemIndex();32
33
this.cdRef.detectChanges();34
}35
36
}37
Console errors: 0