0

How do I toggle between two html elements based on what value I have in Table column ? As Column value is loaded into dataSource variable and I am rendering it. So is there any way I can use column value to render a specific html .

Paras Bartwal
  • 15
  • 3

1 Answers1

0

If you wish that something would react on template based on what values are in the template table, that's doable. For example, I am going to access element.weight and when element value is > 10 I will render some HTML changes. In this case adding a green circle if its over 10 and a red one when < 10.

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef> Weight </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}}
    <div *ngIf="element.weight >= 10" style="height: 10px; width: 10px; border-radius: 10px; background: green"></div>
    <div *ngIf="element.weight < 10" style="height: 10px; width: 10px; border-radius: 10px; background: red"></div>
    </td>
  </ng-container>

Here is a working example: https://stackblitz.com/edit/angular-dhjzer?file=src%2Fapp%2Ftable-basic-example.html

Joosep Parts
  • 5,372
  • 2
  • 8
  • 33
  • Thanks . I am was using ` *ngIf="{{userRow.role}}!='r'" ` like this thus resulting in number of errors . And now it works . Thanks. – Paras Bartwal Feb 04 '22 at 08:10