CODEWITHSUNDEEP
htmlcssangular
BlueScoreMan
BlueScoreMan

Reputation: 707

Conditional *ngFor loop - Angular

I am trying to make a row of 4 different images from a list of images in Angular with the *ngFor loop. But what I am getting are rows of 4 and the same images.

<div class="row" *ngFor="let image of gallery; let i = index">
  <div class="col-xs-12 col-s-6 col-4 col-l-3">
    <img (click)="openModal()" [src]="getSanitizeUrl(image)" class="hover-shadow">
  </div>
  <div class="col-xs-12 col-s-6 col-4 col-l-3">
    <img (click)="openModal()" [src]="getSanitizeUrl(image)" class="hover-shadow">
  </div>
  <div class="col-xs-12 col-s-6 col-4 col-l-3">
    <img (click)="openModal()" [src]="getSanitizeUrl(image)" class="hover-shadow">
  </div>
  <div class="col-xs-12 col-s-6 col-4 col-l-3">
    <img (click)="openModal()" [src]="getSanitizeUrl(image)" class="hover-shadow">
  </div>
</div>

Upvotes: 0

Views: 1972

Answers (3)

daddygames
daddygames

Reputation: 1928

There are probably a few ways to solve this issue, but I chose to write it this way to try to help explain.

In the TypeScript file, you have the array of image names called gallery. You want them in groups of 4 for the display. So let's go ahead and create those groups in the TypeScript file in ngOnInit.

groupedGallery = [];

ngOnInit() {
    let group = [];
    for(let i = 0; i < this.gallery.length; i++) {
        if (group.length==4) {
            this.groupedGallery.push(group);
            group = [this.gallery[i]];
        } else {
            group.push(this.gallery[i]);
        }
    }
    if (group.length>0) {
        this.groupedGallery.push(group);
    }
}

Now we will use the new groups of arrays, groupedGallery to make the rows of images that you desire in the HTML. We will loop the groupedGallery using an ng-container since that won't create any HTML, it just controls the loop. Inside the container, we will create a row for each group. Inside the row, we will create a column for each image in that group.

<ng-container *ngFor="let group of groupedGallery">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" *ngFor="let image of group">
            <img (click)="openModal()" [src]="getSanitizeUrl(image)" class="hover-shadow">
        </div>
    </div>
</ng-container>

If you ever wanted to change how many images showed in a row, you can change the CSS classes in the HTML, and update this line of code in TypeScript: if (group.length==4) {

I hope this helps.

Upvotes: 1

N Fard
N Fard

Reputation: 1099

you have different options. chunking the array before passing to *ngFor. having 2 *ngfor there and use slice pipe. the simplest one is using br tag after 4th item.

stackblitz

<div class="row" *ngFor="let image of gallery; let i = index">
  <br  *ngIf="i % 4 == 0"/> 
  <div class="col-xs-12 col-s-6 col-4 col-l-3">
    <img (click)="openModal()" [src]="getSanitizeUrl(image)" class="hover-shadow">
  </div>
</div>

Upvotes: 0

Alaksandar Jesus Gene
Alaksandar Jesus Gene

Reputation: 6883

Your class names are incorrect. I am not sure, whether col-l-* can be used. Need to cross check the documentation.

<div class="container">
<div class="row" >
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" *ngFor="let image of gallery; let i = index">
     {{image}} <!-- Replace your image code here -->
  </div>
</div>
</div>

https://stackblitz.com/edit/angular-ivy-aprfqw

Upvotes: 0

Related Questions