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
– LDJ, Commented May 18, 2016 at 11:40
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
– noobProgrammer, Commented May 18, 2016 at 11:51

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

2

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>

answered May 18, 2016 at 11:40

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

noobProgrammer Over a year ago

does *ngIf="pad.picturefirst" looks for any value or null or a boolean value??

Thierry Templier Over a year ago

In fact JavaScript supports falsy values. I leverage this ;-) See this article: sitepoint.com/javascript-truthy-falsy.

noobProgrammer Over a year ago

can you help me here stackoverflow.com/questions/37864860/…

Collectives™ on Stack Overflow

conditional data binding in angular2

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related