Aufgabe:
Wie kann man spezielle Spalten mit statischem Text oder Links einfügen in eine Angular Material Tabelle?
Lösung:
Anstatt einer Material Cell gibt man ein reguläres HTML Element aus
Standard Angular Material Cell
<td mat-cell *matCellDef="let element"> {{element.dtEnd}} </td> |
Als HTML Element
<a href="/timerecords/edit/{{element.idtimeRecord}}">Edit</a> |
<!-- Edit-Column --> <!-- *as column with a link to edit page --> <ng-container matColumnDef="edit" > <th mat-header-cell *matHeaderCellDef>edit</th> <td mat-cell *matCellDef="let element"> <a href="/timerecords/edit/{{element.idtimeRecord}}">Edit</a> </td> </ng-container> <!--/ Edit-Column -->
|
Spalte Definition in Typescript
Die Spalte muss in der typescript Codebehind Datei als Material Spalte vorgegeben werden
In .component.ts
//< variables > displayedColumns: string[] = ['project', 'details', 'dtStart', 'dtEnd','edit','delete']; //dataSource: TimeRecord; dataSource = new MatTableDataSource<TimeRecord>();
|
Code Material Table Liste
List-timerecords.component.ts
<div class=" mat-elevation-z8">
<div class="error_table_loading" *ngIf="isHttpError">Api Data error</div>
<p>List</p>
<table mat-table [dataSource]="dataSource" class="timerecordtable" matSort matSortActive="created" matSortDisableClear matSortDirection="desc">
<ng-container matColumnDef="project"> <th mat-header-cell *matHeaderCellDef> project </th> <td mat-cell *matCellDef="let element"> {{element.project}} </td> </ng-container>
<!-- Edit-Column --> <ng-container matColumnDef="edit" > <th mat-header-cell *matHeaderCellDef>edit</th> <td mat-cell *matCellDef="let element"> <a href="/timerecords/edit/{{element.idtimeRecord}}">Edit</a> </td> </ng-container> <!--/ Edit-Column -->
<!-- Delete-Column --> <ng-container matColumnDef="delete"> <th mat-header-cell *matHeaderCellDef>delete</th> <td mat-cell *matCellDef="let element"> <a href="/timerecords/delete/{{element.idtimeRecord}}">Delete</a> </td> </ng-container> <!--/ Delete-Column -->
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table>
</div>
<mat-progress-spinner></mat-progress-spinner>
|
Code list-timerecords.component.ts
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; import { TimerecordsService } from "../../../services/timerecords.service"; import { TimeRecord } from '../../../models/timerecords.model'; import { pipe } from 'rxjs'; import { catchError, map, startWith, switchMap } from 'rxjs/operators'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import {ThemePalette} from '@angular/material/core'; import {ProgressSpinnerMode} from '@angular/material/progress-spinner';
import { merge, Observable, of as observableOf } from 'rxjs'; import { MatTableDataSource } from '@angular/material/table';
@Component({ selector: 'app-list-timerecords', templateUrl: './list-timerecords.component.html', styleUrls: ['./list-timerecords.component.css'] })
export class ListTimeRecordsComponent implements OnInit { //========< class: Compontent >======== constructor(public timerecordsService: TimerecordsService) { }
//< variables > displayedColumns: string[] = ['project', 'details', 'dtStart', 'dtEnd','edit','delete']; //dataSource: TimeRecord; dataSource = new MatTableDataSource<TimeRecord>(); resultsLength = 0; isLoadingResults = true; isHttpError = false; //</ variables >
color: ThemePalette = 'primary'; mode: ProgressSpinnerMode = 'indeterminate';
//==< events >== ngOnInit() { this.load_DataSource(); } //==</ events >==
//#region //====< functions >==== load_DataSource() { //--------< load_DataSource() >-------- this.isLoadingResults = true; merge() .pipe( startWith({}), switchMap(() => { this.isLoadingResults = true; return this.timerecordsService.getData() }), catchError(() => { this.isLoadingResults = true; this.isHttpError = true; return observableOf([]); }) ).subscribe(res => {this.dataSource.data = res as TimeRecord[]} )
//--------</ load_DataSource() >-------- } //====</ functions >==== //#endregion
//========</ class: Compontent >======== }
|