File
Implements
Metadata
| selector |
app-dynamic |
| styleUrls |
./dynamic.component.scss |
| templateUrl |
./dynamic.component.html |
|
data
|
Type : any
|
Default value : []
|
|
|
|
displayedColumns
|
Type : string[]
|
Default value : [
'userId',
'loginName',
'loginCount',
'lastLoginTime',
'lastLoginIp'
]
|
|
|
|
exampleDatabase
|
Type : any
|
|
|
|
isLoadingResults
|
Default value : true
|
|
|
|
isRateLimitReached
|
Default value : false
|
|
|
|
paginator
|
Type : MatPaginator
|
Decorators :
@ViewChild(MatPaginator, {static: false})
|
|
|
|
resultsLength
|
Type : number
|
Default value : 0
|
|
|
|
sort
|
Type : MatSort
|
Decorators :
@ViewChild(MatSort, {static: false})
|
|
|
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator, MatSort } from '@angular/material';
import { merge, Observable, of as observableOf } from 'rxjs';
import { catchError, map, startWith, switchMap } from 'rxjs/operators';
import { DynamicService } from './dynamic.service';
@Component({
selector: 'app-dynamic',
templateUrl: './dynamic.component.html',
styleUrls: ['./dynamic.component.scss']
})
export class DynamicComponent implements OnInit {
displayedColumns: string[] = [
'userId',
'loginName',
'loginCount',
'lastLoginTime',
'lastLoginIp'
];
exampleDatabase: any;
data: any = [];
resultsLength = 0;
isLoadingResults = true;
isRateLimitReached = false;
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
@ViewChild(MatSort, { static: false }) sort: MatSort;
constructor(private service: DynamicService) { }
ngOnInit() {
this.sort.sortChange.subscribe(() => (this.paginator.pageIndex = 0));
merge(this.sort.sortChange, this.paginator.page)
.pipe(
startWith({}),
switchMap(() => {
this.isLoadingResults = true;
return this.service.select(this.sort.active, this.sort.direction, this.paginator.pageIndex);
}),
map(data => {
this.isLoadingResults = false;
this.isRateLimitReached = false;
this.resultsLength = 100;
return data;
}),
catchError(() => {
this.isLoadingResults = false;
this.isRateLimitReached = true;
return observableOf([]);
})
)
.subscribe(data => (this.data = data));
}
}
<div class="example-container mat-elevation-z8">
<div
class="example-loading-shade"
*ngIf="isLoadingResults || isRateLimitReached"
>
<mat-spinner *ngIf="isLoadingResults"></mat-spinner>
</div>
<div class="example-table-container">
<table
mat-table
[dataSource]="data"
class="example-table"
matSort
matSortActive="userId"
matSortDisableClear
matSortDirection="asc"
>
<ng-container matColumnDef="userId">
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>
userId
</th>
<td mat-cell *matCellDef="let row">{{ row.userId }}</td>
</ng-container>
<ng-container matColumnDef="loginName">
<th mat-header-cell *matHeaderCellDef>
loginName
</th>
<td mat-cell *matCellDef="let row">{{ row.loginName }}</td>
</ng-container>
<ng-container matColumnDef="loginCount">
<th mat-header-cell *matHeaderCellDef>loginCount</th>
<td mat-cell *matCellDef="let row">{{ row.loginCount }}</td>
</ng-container>
<ng-container matColumnDef="lastLoginTime">
<th mat-header-cell *matHeaderCellDef>lastLoginTime</th>
<td mat-cell *matCellDef="let row">{{ row.lastLoginTime }}</td>
</ng-container>
<ng-container matColumnDef="lastLoginIp">
<th mat-header-cell *matHeaderCellDef>lastLoginIp</th>
<td mat-cell *matCellDef="let row">{{ row.lastLoginIp }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
</div>
<mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
</div>
:host {
display: block;
margin: 20px;
}
.example-container {
position: relative;
}
.example-table-container {
position: relative;
max-height: 400px;
overflow: auto;
}
table {
width: 100%;
}
.example-loading-shade {
position: absolute;
top: 0;
left: 0;
bottom: 56px;
right: 0;
background: rgba(0, 0, 0, 0.15);
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.example-rate-limit-reached {
color: #980000;
max-width: 360px;
text-align: center;
}
Legend
Html element with directive