CODEWITHSUNDEEP
angularangular-ng-if
Giuseppe Damis
Giuseppe Damis

Reputation: 51

How can I use *ngIf directive to change an image?

I'm developing an application with the technologies shown below. How can i use *ngIf directive to change an image with another one? I will be more precise in explaining my intentions; I've two images (male symbol ♂ and female symbol ♀), when I've 'gender == M' I have to display male symbol, instead when I've 'gender == F' I have to display feminin symbol. Thanks to everyone!

Technologies that I currently use:

Upvotes: 2

Views: 7581

Answers (3)

Giuseppe Damis
Giuseppe Damis

Reputation: 51

I solved,

<img *ngIf="response.gender == 'F'" src="female.png" slot="start" />
<img *ngIf="response.gender == 'M'" src="male.png" slot="start" />

Upvotes: 2

Anusha_Mamidala
Anusha_Mamidala

Reputation: 397

Rather than using images you can go for font awesome icons

<div *ngIf="gender == 'F'; else elseBlock">
  <i class="fa fa-venus" aria-hidden="true">
  </i>
</div>
<ng-template #elseBlock>
  <i class="fa fa-mars" aria-hidden="true">
  </i>
</ng-template>

Upvotes: 0

Sneha Pawar
Sneha Pawar

Reputation: 1127

you can use like below 

<img src="gender == 'M'? 'your image path for male': 'your image path for Female'"/>

using above no need to use ngIf directive

Upvotes: 1

Related Questions