1 Replies - 1222 Views - Last Post: 16 September 2020 - 09:06 PM

#1 Preacher2012   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 160
  • Joined: 02-November 12

How to dynamically generate mattables in matexpansionpanel with *ngFor

Posted 11 June 2020 - 05:30 AM

Hi all, I am trying to generate multiple MatTables with datasouces stored in objects. These MatTables would be in an mat-accordion mat-expansion-panel using the *ngFor directive to loop through the array of objects. This is how I have imported the MatTableDataSource and the MatSort:
import { MatTableDataSource } from '@angular/material/table';
import { MatSort } from '@angular/material/sort';


Then I created a sort to use:
@ViewChild('MatSort1', {static: true}) sort: MatSort;


This is my data array which will get populated and the columns array:
public data: any = [];
public dataColumns = ['name', 'profession', 'dob'];


I have a function where I am populating it like this with a for loop:
var tempData = [{'name':'oswald', 'profession':'mechanic', 'dob':'5/3/1983'}];
this.data.push({title:'sample1', dataSource: new MatTableDataSource(tempData)});


After this for loop, i am running another where I am setting the sort for each object's dataSource:
for(let i = 0; i < this.data.length; i++) {
  this.data[i].dataSource.sort = this.sort;
  console.log(this.sort); // this is undefined
}


And this is how I have my accordion and expansion pannel set up with the tables being generated:
<mat-accordion multi="true">
  <mat-expansion-panel *ngFor='let dat of data'>
    <mat-expansion-panel-header>
      <mat-panel-title> {{dat.title}} </mat-panel-title>
    </mat-expansion-panel-header>
    <table matTableExporter mat-table [dataSource]="dat.dataSource" matSort #MatSort1='matSort' matSortActive="name" matSortDisableClear matSortDirection="asc" #exporter="matTableExporter">
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header title="Name"> Name </th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
      </ng-container>
      <ng-container matColumnDef="profession">
        <th mat-header-cell *matHeaderCellDef mat-sort-header title="Profession"> Profession </th>
        <td mat-cell *matCellDef="let element"> {{element.profession}} </td>
      </ng-container>
      <ng-container matColumnDef="dob">
        <th mat-header-cell *matHeaderCellDef mat-sort-header title="DOB"> DOB </th>
        <td mat-cell *matCellDef="let element"> {{element.dob}} </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="dataColumns; sticky: true"></tr>
      <tr mat-row *matRowDef="let row; columns: dataColumns"></tr>
    </table>
  </mat-expansion-panel>
</mat-accordion>


But my sort is still showing as undefined when I console log it and when i check my datasources. Why is it still showing as undefined? How can I attempt to fix this? All help is greatly appreciated, thank you.

This post has been edited by Preacher2012: 11 June 2020 - 05:32 AM


Is This A Good Question/Topic? 0
  • +

Replies To: How to dynamically generate mattables in matexpansionpanel with *ngFor

#2 ishan.shah   User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 56
  • Joined: 28-March 19

Re: How to dynamically generate mattables in matexpansionpanel with *ngFor

Posted 16 September 2020 - 09:06 PM

This blog might help you:
https://medium.com/@...al-4dbbfa552083

This post has been edited by ishan.shah: 16 September 2020 - 09:07 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1