CODEWITHSUNDEEP
htmlangular
Nikson
Nikson

Reputation: 940

How to disable image tag in Angular 4

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

Upvotes: 0

Views: 3982

Answers (1)

jdmcnair
jdmcnair

Reputation: 1315

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>

Upvotes: 4

Related Questions