Conditional *ngFor loop - Angular

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.