Can you add index to let element; let i = index;” as you’d do with *ngFor? <mat-row *matRowDef=”let row; columns: displayedColumns; let i = index”></mat-row> Or like so: <ng-container matColumnDef=”index”> <mat-header-cell *matHeaderCellDef> Index </mat-header-cell> <mat-cell *matCellDef=”let element; let i = index;”>{{i}}</mat-cell> </ng-container> Working Example: https://stackblitz.com/edit/angular-acdxje?file=app/table-basic-example.html
It was hard to find documentation on this, but it is possible by using sortingDataAccessor and a switch statement. For example: @ViewChild(MatSort) sort: MatSort; ngOnInit() { this.dataSource = new MatTableDataSource(yourData); this.dataSource.sortingDataAccessor = (item, property) => { switch(property) { case ‘project.name’: return item.project.name; default: return item[property]; } }; this.dataSource.sort = sort; }
I found the solution here. It’s necessary to rewrite filterPredicate, and just use it as usual, filterPredicate needs to return true when filter passes and false when it doesn’t export interface Element { name: string; position: number; weight: number; symbol: string; } dataSource = new MatTableDataSource(ELEMENT_DATA); /* configure filter */ this.dataSource.filterPredicate = (data: Element, filter: … Read more
Not sure if this will help your situation as there’s no code but we’ve found that the MatTable loads very slowly if a large data set is set before you set the datasource paginator. For example – this takes several seconds to render… dataSource: MatTableDataSource<LocationItem> = new MatTableDataSource(); @ViewChild(MatSort) sort: MatSort; @ViewChild(MatPaginator) paginator: MatPaginator; ngOnInit() … Read more
After some research I ended up with this conclusion which solved it for me, hope it will help you too. Step1: Create your own palettes from branding colors. Found this awesome website where you enter your brand color, and it creates a complete palette with the different shades of that brand color: http://mcg.mbitson.com I used … Read more
Here is the only solution I found for this one: First, create const: const MY_DATE_FORMATS = { parse: { dateInput: {month: ‘short’, year: ‘numeric’, day: ‘numeric’} }, display: { // dateInput: { month: ‘short’, year: ‘numeric’, day: ‘numeric’ }, dateInput: ‘input’, monthYearLabel: {year: ‘numeric’, month: ‘short’}, dateA11yLabel: {year: ‘numeric’, month: ‘long’, day: ‘numeric’}, monthYearA11yLabel: {year: … Read more
Use a binding for the value in your template. value=”{{ option.id }}” should be [value]=”option.id” And in your selected value use ngModel instead of value. <mat-select [(value)]=”selected2″> should be <mat-select [(ngModel)]=”selected2″> Complete code: <div> <mat-select [(ngModel)]=”selected2″> <mat-option *ngFor=”let option of options2″ [value]=”option.id”>{{ option.name }}</mat-option> </mat-select> </div> On a side note as of version 2.0.0-beta.12 the … Read more
Your VulnerabilityDataSource, has not property data nor filter nor sort… Really I can’t imagine what do you want to reach with your code. If the only you want a mat-table with filter, sort and pagination in server, you can get it only subscribing to filter.valuesChange, paginator.page and sort.sortChange Imagine you has a service with two … Read more
If you just need to add an attribute in order to trigger CSS rules, you can use the below method: (this does not dynamically create/destroy a directive) <button [attr.md-raised-button]=”condition ? ” : null”></button> Applied the same to your plunker: fork Update: How condition ? ” : null works as the value: When its the empty … Read more