0

I am working in an Angular4 application ,In this I want show the images based on the API response as follows

In my application when the user clicked on a product that product name is passed to the API and API will return the images related to the product.

In the product details page I am showing the product like user hover on the small images it will display the big size images .

This is my HTML.

<div class="col-sm-5">
  <div class="container" >
    <img [src]="i_path"  id="ProductImage" class="img-fluid" data-toggle="modal" data-target="#exampleModalCenter" alt="error">
  </div>
    <div>
    <div class="row">

          <img *ngIf="smallImages['0']['small_Images']" id="sm001" (mouseenter)="mouseEnter($event)"  src="{{smallImages['0']['small_Images']}}" alt="img1" class="img-thumbnail" [attr.ref]="bigImages['0']['big_Images']">
          <img *ngIf="smallImages['1']['small_Images']" id="sm005" (mouseenter)="mouseEnter($event)"  src="{{smallImages['1']['small_Images']}}" alt="img2" class="img-thumbnail" [attr.ref]="bigImages['1']['big_Images']">
          <img *ngIf="smallImages['2']['small_Images']" id="sm002" (mouseenter)="mouseEnter($event)"  src="{{smallImages['2']['small_Images']}}" alt="img3" class="img-thumbnail" [attr.ref]="bigImages['2']['big_Images']">
          <img *ngIf="smallImages['3']['small_Images']" id="sm003" (mouseenter)="mouseEnter($event)"  src="{{smallImages['3']['small_Images']}}" alt="img4" class="img-thumbnail" [attr.ref]="bigImages['3']['big_Images']">
          <img *ngIf="smallImages['4']['small_Images']" id="sm004" (mouseenter)="mouseEnter($event)"  src="{{smallImages['4']['small_Images']}}" alt="img5" class="img-thumbnail" [attr.ref]="bigImages['4']['big_Images']">
      </div>

What I want to do is If the API returns image path for 3 images means I want to show only three images(image tag).If API returns 5 paths then I want to display 5 images .This process is dynamic based on the API response count of images.

Simply When the Image src tag is not get the path I want to disable that img tag.

Now I have 5 static image tag where I passed the API response it shows the images ,If API returns 4 image paths it shows 4 images and 1 alt tag.

I want to make it dynamic process...

Thanks ...

Nikson
  • 900
  • 2
  • 21
  • 51

1 Answers1

4

Instead of *ngIf, use *ngFor on your smallImages array:

<div class="row">

  <img *ngFor="let smallImage of smallImages; let i = index" (mouseenter)="mouseEnter($event)"  [src]="smallImage['small_Images']" [alt]="'img' + i" class="img-thumbnail" [attr.ref]="bigImages[i]['big_Images']">
  
</div>
jdmcnair
  • 1,305
  • 15
  • 33
  • If the path is not a valid path of the image it shows alt tag ,Is there any way to disable the alt when the src image is not loaded – Nikson Apr 06 '18 at 09:51
  • If you have items from the `smallImages` array that are not valid to show, it probably makes sense to filter them, rather than do any further conditional logic in the UI. You could filter invalid items out of `smallImages` in the view model, or you could perform the filter from the view with a pipe (https://angular.io/guide/pipes). – jdmcnair Apr 06 '18 at 13:59
  • can you please help me in this https://stackoverflow.com/questions/49748925/adding-products-in-cart-carousel-generate-new-row-of-slider-in-angular4 – Nikson Apr 10 '18 at 09:01
  • Looks like that question was closed, @Nikson? – jdmcnair Apr 10 '18 at 23:45
  • Please take a look at this https://stackoverflow.com/questions/49767230/adding-products-in-carousel-generates-new-row-in-angular4 – Nikson Apr 11 '18 at 05:35
  • can you please help me to solve this https://stackoverflow.com/questions/50055503/how-to-create-dropdown-inside-dropdown-using-bootstrap/50055636#50055636 – Nikson Apr 27 '18 at 05:18