CODEWITHSUNDEEP
angularangular-materialangular7
RidRoid
RidRoid

Reputation: 961

Angular Material Table with object as datasource

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.

Upvotes: 3

Views: 12902

Answers (1)

Thriller
Thriller

Reputation: 505

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;
}

Upvotes: 1

Related Questions