how to incorporate ngif criteria

Question

I am trying to only display data if they meet the cirteria of image.media_type === image. How do I add that inside this ngfor so only images are displayed?

<div *ngFor="let image of childPhotos">

    <div class="gallery openImageDialog" data-id={{image.url}} data-title={{image.title}}>
      <span id="myExplan" data-id={{image.explanation}}></span>
      <a href="#gardenImage" class="thumbnail" data-toggle="modal">
        <img class="img-responsive" src={{image.url}} alt={{image.title}}>
        <div class="hidden" data-title={{image.title}}></div>
      </a>
      <div class="desc">{{image.title}}</div>
    </div>

</div>

Answer 1

Certainly you can add it right after the ngFor loop with the div

<div *ngFor="let image of childPhotos">
    <div *ngIf="image.media_type === 'image'" class="gallery openImageDialog" data-id={{image.url}} data-title={{image.title}}>
      <span id="myExplan" data-id={{image.explanation}}></span>
      <a href="#gardenImage" class="thumbnail" data-toggle="modal">
        <img class="img-responsive" src={{image.url}} alt={{image.title}}>
        <div class="hidden" data-title={{image.title}}></div>
      </a>
      <div class="desc">{{image.title}}</div>
    </div>
</div>