How to show icons conditionally?

user_12971921 0
Viewed 66

I am trying to implement a small logic, where depending on the API property should be rendered different icons.

The API sends 3 types of media_type:

  • image
  • video
  • album

I just want to display different icons based on those 3 types.

In react.js I would do :

{
 data.media_type==='image'
 ?
 <mat-icon svgIcon="image" aria-hidden="false"></mat-icon>
 :
 data.media_type==='video'
 ?
 <mat-icon>video</mat-icon>
 :
 <mat-icon>album</mat-icon>
}

How can I do similar in Angular?

Any help will be appreciated.

angular
1 Answers

In Angular you could also have the same implementation. I will mention 3 methods below:

Method 1:

<mat-icon *ngIf="data.media_type==='image'">image</mat-icon>
<mat-icon *ngIf="data.media_type==='video'">movie</mat-icon>
<mat-icon *ngIf="data.media_type==='album'">album</mat-icon>

In this case when data.media_type is image, the image icon is shown and the other two are hidden. The same goes for the other icons as well.

Method 2:

<mat-icon>{{data.media_type==='image' ? 'image' : data.media_type==='video' ? 'movie' : 'album'}}</mat-icon>

Method 3:

In your component you can also define a method that returns the name of the icon you want to be displayed according to data.media_type.

<mat-icon>{{showIcon()}}</mat-icon>

xxx.component.ts:

showIcon():string {
   if (this.data.media_type === 'image') {
       return 'image';
   } else if (this.data.media_type === 'video') {
       return 'movie';
   } else {
       return 'album';
   }
}

My most and least favorite would be method 1 and method 3. In method 3, the method is constantly being executed in your template which is why I think it is not the most efficient method.

user_136903310
Related