conditional data binding in angular2

Question

below is my code to display images from database .

   <div *ngfor='let pad of pictures' class="">
      <img class="activator"src="imagepas/{{pad.picturefirst}}">
    </div>

in database sometime there will not be image every time so i want to display a default image, image is for this case alone but there will situations when i want to do some conditional calculation before displaying data. i read about ngswitch but how can i put condition like pad.picturefirst==null its not working that way . please help

How about having a boolean property on your component which is set based on the presence of images in teh database. Then have two image tags that are set to show based on the opposite value of the boolean (so only one will ever be rendered). If there's not data it will render the placeholder, if there is data it will render the other img tag that is DB databound... — LDJ
angular has its way as in answer below . your idea will work but one boolean variable calculating each time with new image , there will be 100s of images , i am not sure but there will be performance problem ....perhaps or not .. i dont know anyways for now going with angular way... — noobProgrammer

Thierry Templier Thierry Templier · Accepted Answer · 2016-05-18T11:40:22

You could leverage ngIf:

<div *ngfor='let pad of pictures' class="">
  <img *ngIf="pad.picturefirst"
    class="activator"src="imagepas/{{pad.picturefirst}}">
  <img *ngIf="!pad.picturefirst" 
    class="activator"src="imagepas/defaultimage.png">
</div>

conditional data binding in angular2

1 Answers