Angular Material Table with object as datasource

Question

My component looks like this :

import { Component, OnInit } from '@angular/core';
import { Member} from '../entities/Member'; 
import { SearchService } from './search.service';

@Component({   
  selector: 'app-search',   
  templateUrl: './search.component.html',   
  styleUrls: ['./search.component.scss']})

export class SearchComponent implements OnInit {

  members: Member[] = [];  
  constructor(private searchService: SearchService) { }

  ngOnInit() {
    this.searchService.getPartenaires().subscribe(
        member=> {
          this.members= member;
        }
    );   
  } 
}

I haven't figured out how to display my objects on a material table using ngFor. the examples on https://material.angular.io/components/table/overview are always using arrays as DataSource.

Should I put my objects into an array before passing them to the HTML? or is there a way to loop through them? thanks.

yes you need to push all your objects in array then pass to html. — TheParam
– TheParam, Commented Mar 25, 2019 at 10:48
@RidRoid one of the reason is 'ngFor' is working on array not in object — Abhishek
– Abhishek, Commented Mar 25, 2019 at 10:54

Thriller · Accepted Answer · 2019-03-25 11:19:02Z

In order to work with Angular Material Table you need to first import MatTableModule module from import {MatTableModule} from '@angular/material/table'; into your app.module.ts (in case you want to use other functionalities like MatSort you have to include them as well. Then in your DOM file you should add the template for your table and table columns like following:

<table #dataTable mat-table [dataSource]="dataSource">
<!-- COLUMN INFO -->
 <!--ID Col -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef>ID</th>
    <td mat-cell *matCellDef="let item"> {{item.id}} </td>
  </ng-container>

  <!--Name Col -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>Name</th>
    <td mat-cell *matCellDef="let item">{{item.name}} </td>
  </ng-container>

<!-- ROW Info-->
  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
  <tr mat-row *matRowDef="let rowData; columns: columnsToDisplay;"></tr>
</table>

After this in your component.ts file you need to do three things:

define the column names you want to be displayed (they should match the matColumnDef in DOM File)
Introduce your data source to the mat table
call the renderRows() on the data table

bare in mind that this will automatically iterate through your data source array and will populate the table you don't need any *ngFor. Just keep your data source as Array of Objects.

import { MatTableDataSource, MatTable, MatSort } from '@angular/material';
import { Component, ViewChild, OnInit }
export class DocumentListComponent implements OnInit {
  @ViewChild('dataTable') dataTable: MatTable<any>;
  dataSource: MatTableDataSource<ItemModel> ;
  columnsToDisplay = ['id', 'name'];
  ngOnInit() {
      let dataSamples: ItemModel[] ;
      //init your list with ItemModel Objects (can be manual or come from server etc) And put it in data source
      this.dataSource = new MatTableDataSource<ItemModel>(dataSamples);
      if(this.dataSource){
            this.dataTable.renderRows();
      }
  }
}
export class ItemModel {
name: string;
id: number;
}

Hmm doesn't work with me, ViewChild dataTable doesn't know "renderRows()" :(

Collectives™ on Stack Overflow

Angular Material Table with object as datasource

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related