How to Display Images without using *ngFor

0
votes

https://stackblitz.com/edit/angular-76v5xt?file=src%2Fapp%2Fapp.component.html

In the above stackblitz link i am trying to display all images without using ngFor, but not working.

Please help.

2
angular
Why do you want to avoid ngFor? You want to show all images, no? – johey
Actually, I used slider & zooming image. On that if i use ngFor, slider and zoomingimage is not working. – srikanth dasari

2 Answers

1
votes

Another way, you can create template in app.component.ts.And you can use [innerHTML] tag on parent div.https://stackblitz.com/edit/angular-grk7qd

import {
  Component
} from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  products = ["https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg", "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg", "https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg"];
  _myImagesHTML;
  constructor() {
    this._myImagesHTML = "";
    for (let i = 0; i < this.products.length; i++) {
      this._myImagesHTML += "<img src='" + this.products[i] + "'></img>";
    }
  }
}
<div [innerHTML]="_myImagesHTML">
</div>
1
votes

Set your html 

<div>
  <img src="{{products[0]}}">
</div>