angular-material-app documentation
  1. Components
  2. DynamicComponent

File

src/app/tables/dynamic/dynamic.component.ts

Implements

OnInit

Metadata

selector app-dynamic
styleUrls ./dynamic.component.scss
templateUrl ./dynamic.component.html

Index

Properties
Methods

Constructor

constructor(service: DynamicService)
Defined in src/app/tables/dynamic/dynamic.component.ts:28
Parameters :
Name Type Optional
service DynamicService No

Methods

ngOnInit
ngOnInit()
Defined in src/app/tables/dynamic/dynamic.component.ts:32
Returns : void

Properties

data
Type : any
Default value : []
Defined in src/app/tables/dynamic/dynamic.component.ts:21
displayedColumns
Type : string[]
Default value : [ 'userId', 'loginName', 'loginCount', 'lastLoginTime', 'lastLoginIp' ]
Defined in src/app/tables/dynamic/dynamic.component.ts:13
exampleDatabase
Type : any
Defined in src/app/tables/dynamic/dynamic.component.ts:20
isLoadingResults
Default value : true
Defined in src/app/tables/dynamic/dynamic.component.ts:24
isRateLimitReached
Default value : false
Defined in src/app/tables/dynamic/dynamic.component.ts:25
paginator
Type : MatPaginator
Decorators :
@ViewChild(MatPaginator, {static: false})
Defined in src/app/tables/dynamic/dynamic.component.ts:27
resultsLength
Type : number
Default value : 0
Defined in src/app/tables/dynamic/dynamic.component.ts:23
sort
Type : MatSort
Decorators :
@ViewChild(MatSort, {static: false})
Defined in src/app/tables/dynamic/dynamic.component.ts:28
 
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));
  }
}
Copy
<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>
Copy

./dynamic.component.scss 

: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;
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""