CODEWITHSUNDEEP
angularangular-material-table
Dominik
Dominik

Reputation: 153

Angular show image in Material Table Cell

I try to show an image in a cell of my Material table. Therefore I tried this code in my HTML File:

<ng-container matColumnDef="ImageUrl">
  <mat-header-cell *matHeaderCellDef> imageUrl </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.imageUrl}} </mat-cell>
  <img [src]="imageUrl" />
</ng-container>

Unfortunately, nothing appears in my Table.

Upvotes: 12

Views: 23211

Answers (3)

Vanderwood
Vanderwood

Reputation: 193

Actually your code is going to work with one change. I would like to share the answer for those who would like to use <mat-header-cell> <mat-cell> instead of <th><td> in their table.

<ng-container matColumnDef="ImageUrl">
  <mat-header-cell *matHeaderCellDef> imageUrl </mat-header-cell>
  <mat-cell *matCellDef="let element">
    <img [src]="element.imageUrl"/>
  </mat-cell>
</ng-container>

Working Sample

Upvotes: 1

keemsisi
keemsisi

Reputation: 419

<ng-container matColumnDef="imageUrl">
  <th mat-header-cell *matHeaderCellDef> Image Url </th>
  <td mat-cell *matCellDef="let element"> <img src="{{element.imageUrl}}" /> </td>
</ng-container>

...will also work. Cheers.

Upvotes: 0

SiddAjmera
SiddAjmera

Reputation: 39442

Give this a try:

<ng-container matColumnDef="imageUrl">
  <th mat-header-cell *matHeaderCellDef> Image Url </th>
  <td mat-cell *matCellDef="let element"> <img [src]="element.imageUrl" /> </td>
</ng-container>

Here's a Working Sample StackBlitz for your ref.

Upvotes: 22

Related Questions