1

I have an angular-django app which makes an aPI call to a third-party application and returns json response. I am looping through the response and displaying the data in a table.

<tr *ngFor="let item of job_list">
     
      <td style="text-align:center">{{item?.ReleaseName}}</td>
      <td style="text-align:center">{{item?.Source}}</td>
      <td style="text-align:center"><mat-icon *ngIf="Successful" style="color:green;">check circle icon</mat-icon>
                                    <mat-icon *ngIf="Faulted" style="color: red;">error icon</mat-icon> 
                                    <mat-icon *ngIf="Stopped" style="color: grey;">cancel icon</mat-icon>
                                    {{item?.State}}
                                  
                                  
      </td>
      <td style="text-align:center">{{item?.StartTime | date:'dd-MM-yyyy         HH:mm:ss'}}</td>
      <td style="text-align:center">{{item?.EndTime | date:'dd-MM-yyyy           HH:mm:ss'}}</td>

     
     </tr>

Here, I want to display mat-icon based on {{item?.State}} value. For example if the value is Successful, I want to display the "check circle icon", if it's "Faulted", I want to display "error icon" etc. Is this possible?

Update: Implemented ngIf but alignment is out of order: enter image description here

Thank you

alucor-it
  • 133
  • 3
  • 15

2 Answers2

3

1. You can try ngSwitch solution but ngIf also works:

<td style="text-align:center">
    <mat-icon *ngIf="item?.State === 'Successful'" style="color:green;">check circle icon</mat-icon>
    <mat-icon *ngIf="item?.State === 'Faulted'" style="color: red;">error icon</mat-icon> 
    <mat-icon *ngIf="item?.State === 'Stopped'" style="color: grey;">cancel icon</mat-icon>
    {{item?.State}}                                                               
</td>

2. Or even make it dinamically with a custom method that returns the icon:

.html:

<td style="text-align:center">
    <mat-icon [class]="getIconByItemState(item, true)">{{ getIconByItemState(item) }}</mat-icon>
    {{item?.State}}                                                               
</td>

.ts:

getIconByItemState(item, color: boolean = false): string {
   switch(item?.State) { 
      case 'Successful': { 
         return !color ? 'check circle icon' : 'green-icon'; 
      } 
      case 'Faulted': { 
          return !color ? 'error icon' : 'red-icon'; 
      }
      case 'Stopped': { 
          return !color ? 'cancel icon' : 'grey-icon'; 
      } 
      default: { 
         return 'default icon'; // ? 
      } 
   }
}

1. The best solution (if possible) is to make State variable name equals to icon name:

<td style="text-align:center">
    <mat-icon [class]="item?.State + '-color'">{{ item?.State }}</mat-icon>
    {{item?.State}}                                                               
</td>
davimargelo
  • 124
  • 6
  • lacked to put the css of the classes, but it is basically the icon color only – davimargelo Dec 15 '21 at 11:18
  • 1
    Thank you. I implemented ngIf (first method), but there is some issue with the alignment, could it be because we are using many mat-icon tags? I have added a screenshot to my question. – alucor-it Dec 15 '21 at 12:25
  • I need more information, try to use developer tools to discover if some element is between the text and the icon or even if the sizes of icons are differents. But you can try to adjust it with css, giving a class to each icon instead of defining style="color: somecolor" and adding properties of alignment. Update: actually, i guess it's because you leaving blank space between the icon and state text. – davimargelo Dec 15 '21 at 15:01
  • 1
    Hi, I resolved it. It was because I had defined a css class for icons previously and the mat-icons were using the css deisgn of that class. – alucor-it Dec 16 '21 at 04:52
1
 <td style="text-align:center" [ngSwitch]="item.State">
            <mat-icon *ngSwitchCase="Successful" style="color:green;">check circle icon</mat-icon>
            <mat-icon *ngSwitchCase="Faulted" style="color: red;">error icon</mat-icon> 
           <mat-icon *ngSwitchCase="Stopped" style="color: grey;">cancel icon</mat-icon>
                                                {{item?.State}}
 </td>
Murugan
  • 615
  • 5
  • 19