loop inside mat table angular material

Question

I want to make a loop to display some data in my angular material table, but I can't do it because I don't know how.

 // <img src=" assets/{{element[col.key][0].position}}.jpg alt="img"> // this way works out of the loop.

ts.file

  columns = [
    {key: 'position', display ...., config : {isPosition:true}},

  ];

material.table.Components

<ng-container *ngFor="let col of columns">

 <ng-container *ngIf="col.config.isPosition">
          <div *ngFor="let element of col.config.isPosition">
             <img src=" assets/{{element[col.key].position}}.jpg alt="img">
         </div> 
 </ng-container>

</ng-container>

Answer 1

A little too late on the thread but, I was able to solve this similar problem on my app. Contrary to the first answer, we can use the *ngFor on the ng table.

<table mat-table [dataSource]="materials">
    <ng-container *ngFor="let col of columns;" [matColumnDef]="col">
        <th mat-header-cell *matHeaderCellDef> {{ col | uppercase }} </th>
        <td mat-cell *matCellDef="let material"> {{ material[col] }} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="columns"></tr>
    <tr mat-row *matRowDef="let row; columns: columns;"></tr>
</table>

the material[col] part of code is the key part of this problem. Basically if we try to access the material, it is the individual json of the array. That json contains every property, which is we expects to be defined in our columns. To access each properties of our json, we just need to call the json[propertyNameInString], which in our case is the material[col].

Answer 2

You can't use *ngFor for angular material table. You have to follow the implementation rules. You have to define your data in .ts file as below and then you can bind it to tr like *matRowDef="let row; columns: displayedColumns;".

Here is an example from angular material official site that is available in here.

HTML:

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

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

  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef> Weight </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

</table>

TS:

import {Component} from '@angular/core';

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];

@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = ELEMENT_DATA;
}

result:

For implementing img tag you can create an object that contains src of the images and map it to columns yourself then use that object in DOM.