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.