CODEWITHSUNDEEP
javascriptangulartypescriptcommand-line-interface
Ritika Agarwal
Ritika Agarwal

Reputation: 21

How do I change icon dynamically condition based which is being displayed via typescript?

I am displaying icons via typescript using material icon's name. I want to change the icon according to the condition. Say like in typescript the name of icon is 'power_off', if power is false then we want to use 'power_off' but if the power is true then we want to use 'power'. I am using another component for such code but it is connected with that component and the name is getting changed in this component but in the view it is not getting changed. Please help me out with this. Thank you in advance.

{name: 'associateDriver', visible: true, tooltip: 'Associate Driver', icon: 'person', type: 'icon'},
                {name: 'associateServiceReminder', visible: true, tooltip: 'Service Reminder', icon: 'add_alert', type: 'icon'},
                {name: 'busStopStatus', visible: false, tooltip: 'Bus Stop Status', icon: 'pin_drop', type: 'icon'},
                {name: 'delete', visible: false, tooltip: 'Delete', icon: 'delete', type: 'icon'},
                {name: 'immobilize', visible: true, tooltip: 'Immobilize', icon: 'power_off', type: 'icon'}

Upvotes: 3

Views: 5401

Answers (2)

Manu Janardhanan
Manu Janardhanan

Reputation: 640

Can also try this; a compact version

<mat-icon>{{power ? 'power_on' : 'power_off' }}<mat-icon>

Upvotes: 1

user6600549
user6600549

Reputation:

I hope this help 👍

<div> 
  <mat-icon *ngIf="power">power_on<mat-icon>
  <mat-icon *ngIf="!power">power_off<mat-icon>
</div>

Upvotes: 2

Related Questions