My ng-gallery is not loading the main image initially, even with preload

[GusGusGusGus]

What is the expected behavior?

To load at least one of the images initially.

What is the current behavior?

It's not loading any of the images, only thumbnails. When I click on the thumbnails, the images do load.

What are the steps to reproduce?

I've tried both a normal and a standalone component (current case).

here's my component:

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Member } from 'src/app/_models/member';
import { MembersService } from 'src/app/_services/members.service';
import { GalleryModule, GalleryItem, ImageItem, Gallery } from 'ng-gallery';
import 'hammerjs';
import { SharedModule } from 'src/app/_modules/shared.module';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-member-detail',
  templateUrl: './member-detail.component.html',
  styleUrls: ['./member-detail.component.css'],
  standalone: true,
  imports: [CommonModule, SharedModule, GalleryModule]
})
export class MemberDetailComponent {
  member: Member;
  galleryImages: GalleryItem[] = [];

  constructor(
    private memberService: MembersService, 
    private route: ActivatedRoute) {
    }

    ngOnInit() {
      this.loadMember();

  }

  getImages(): GalleryItem[] {
    const images = [];
    for (const photo of this.member.photos) {
      images.push(new ImageItem({ src: photo?.url, thumb: photo?.url}));
      images.push(new ImageItem({ src: photo?.url, thumb: photo?.url}));   //just for testing
      images.push(new ImageItem({ src: photo?.url, thumb: photo?.url}));   //just for testing
    }
    return images;
  }

  loadMember() {
    this.memberService.getMember(this.route.snapshot.paramMap.get('username')).subscribe(member => {
      this.member = member;
      this.galleryImages = this.getImages();
    })
  }

}

Here's my template:

<div class="row" *ngIf="member">
    <div class="col-4">
        <div class="card">
            <img src="{{member.photoUrl || './assets/user.png'}}" alt="{{member.knownAs}}"
            class="card-img-top img-thumbnail">
            <div class="card-body">
                <div>
                    <strong>Location:</strong>
                    <p>{{member.city}}, {{member.country}}</p>
                </div>
                <div>
                    <strong>Age:</strong>
                    <p>{{member.age}}</p>
                </div>
                <div>
                    <strong>Last Active:</strong>
                    <p>{{member.lastActive}}</p>
                </div>
                <div>
                    <strong>Member Since:</strong>
                    <p>{{member.created}}</p>
                </div>
            </div>
            <div class="card-footer">
                <div class="btn-group d-flex">
                    <button class="btn btn-primary">Like</button>
                    <button class="btn btn-success">Message</button>
                </div>
            </div>
        </div>
    </div>
    <div class="col-8">
        <tabset class="member-tabset">
            <tab heading="About {{member.knownAs}}">
                <h4>Description</h4>
                <p>{{member.introduction}}</p>
                <h4>Looking For</h4>
                <p>{{member.lookingFor}}</p>
            </tab>
            <tab heading="Interests">
                <h4>Interests</h4>
                <p>{{member.interests}}</p>
            </tab>
            <tab heading="Photos">
                <!-- <ngx-gallery [options]="galleryOptions" [images]="galleryImages" style="display: inline-block; margin-bottom: 20px;">
                </ngx-gallery> -->
                <gallery id="usersPhotos" [items]="galleryImages" imageSize="cover" fluid loadingStrategy="preload"></gallery>
            </tab>
            <tab heading="Messages">
                <div class="row">
                    <p>Messages will go here</p>
                </div>
            </tab>
        </tabset>
    </div>
</div>

Which versions are you using for the following packages?

"dependencies": { "@angular/animations": "^17.3.4", "@angular/cdk": "^17.3.4", "@angular/common": "^17.3.4", "@angular/compiler": "^17.3.4", "@angular/core": "^17.3.4", "@angular/forms": "^17.3.4", "@angular/platform-browser": "^17.3.4", "@angular/platform-browser-dynamic": "^17.3.4", "@angular/router": "^17.3.4", "@ng-bootstrap/ng-bootstrap": "^16.0.0", "@popperjs/core": "^2.11.6", "bootstrap": "^5.3.3", "bootswatch": "^5.3.3", "font-awesome": "^4.7.0", "hammerjs": "^2.0.8", "ng-gallery": "^11.0.0", "ngx-bootstrap": "^12.0.0", "ngx-toastr": "^18.0.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.14.4" }, "devDependencies": { "@angular-devkit/build-angular": "^17.3.4", "@angular/cli": "^17.3.4", "@angular/compiler-cli": "^17.3.4", "@angular/localize": "^17.3.4", "@types/jasmine": "~4.3.0", "jasmine-core": "~4.6.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", "typescript": "~5.4.5" }

[MurhafSousli]

Can you reproduce the issue in a stackblitz, here is a template for standalone component https://stackblitz.com/edit/ng-gallery-12

[pchiarato]

Issue happens because of the ng-template when the parent component loads isn't on the dom, only after you select the tab gallery template code is on the dom. if you have gallery Component on the dom available when the parent component loads it's not a problem. I spent ours trying to get this to work as well.

[MurhafSousli]

Ok, I understand that you have solved your issue! closing..