I cannot add images coming from my backend Data into Image Array.

[Muhammad-Taimur]

Hi Lukasz

I'm using ngx-gallery I can run the code available in you repo it works fine for me. But when I get the data from my service and add in this.galleryImages[] its not displaying images only show white screen

NOTE: When I console my Data coming form backend I can see it in console but cannot pass it to this.gallertImages[] Below are my codes:

 public productObject=[];
    galleryOptions: NgxGalleryOptions[] ;
    galleryImages: NgxGalleryImage[];
    newgalleryImages= []

ngOnInit(): void {

    this.getGalleryOptions();
    this.getoptionsIamges()
 }

    this.galleryOptions = [
          {
            width: '600px',
            height: '400px',
            thumbnailsColumns: 4,
            imageAnimation: NgxGalleryAnimation.Slide
          },
          // max-width 800
          {
            breakpoint: 800,
            width: '100%',
            height: '600px',
            imagePercent: 80,
            thumbnailsPercent: 20,
            thumbnailsMargin: 20,
            thumbnailMargin: 20
          },
          // max-width 400
          {
            breakpoint: 400,
            preview: false
          }
        ];

this.galleryImages = this.getoptionsIamges()
    }

getoptionsIamges(){ this._productservice.getproductId$
    .subscribe((data) => {
      this.productObject = data
      this.newgalleryImages.push({
            small:  data.productBlob[0].imagePath,
            medium: data.productBlob[0].imagePath,
            big:    data.productBlob[0].imagePath
            })
            console.log("Receiving Data "+JSON.stringify(this.newgalleryImages))  
 }) 
//I am aware this is showing empty How to bring the value in this I do not know. :(
return this.newgalleryImages 
}

HTML Code:

<ngx-gallery *ngIf="galleryImages" [options]="galleryOptions" [images]="galleryImages" class="ngx-gallery"></ngx-gallery>

Data I'm getting from backend

[
    {
    productId: 86,
    name: "Umer",
    category: "Mobile",
    details: "Test ",
    productBlob: [
    {
    imageName: "8cd3713d-6fee-45e9-99bc-123149061d9a.jpg",
    imagePath: "https://localhost:44362/images/8cd3713d-6fee-45e9-99bc-123149061d9a.jpg"
    },
    {
    imageName: "9f454a3d-6f8d-431c-8951-5665cf4c96de.jpg",
    imagePath: "https://localhost:44362/images/9f454a3d-6f8d-431c-8951-5665cf4c96de.jpg"
    }
   ]
 }
    ]

Please help me as I'm new in angular.