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 .

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.

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...

Nikson
  • 900
  • 2
  • 21
  • 51

1 Answers1

0

You can display the images using a *ngFor directive. Then you can display images dynamically regardless the number of images you get from the service.

<div class="row" *ngIf="smallImages">
     <ng-container *ngFor="let image of images">
       <img (mouseenter)="mouseEnter($event)"  [src]="image.src" 
        class="img-thumbnail">
     </ng-container>
</div>
Anuradha Gunasekara
  • 6,553
  • 2
  • 27
  • 37
  • You can iterate in your images array using *ngFor and render your images as shown in the above example. What do you want to know more? – Anuradha Gunasekara Apr 27 '18 at 05:26
  • I am looking for your help to solve this issue https://stackoverflow.com/questions/50055503/how-to-create-dropdown-inside-dropdown-using-bootstrap – Nikson Apr 27 '18 at 05:28
  • Please take a look at the above link I have given. @Anuradha Gunasekara – Nikson Apr 27 '18 at 05:29