1

I'm new to Angular, I'm trying to add Image gallery in my project. Image gallery works if use the hard coded data in this.galleryImages[] but when I pass my subscribe data into this.galleryImages[] it not showing anything. Note I can see my data in console. Its not only binding in Ngx gallery.

This is the link form ngx-gallery repo:

https://www.npmjs.com/package/@kolkov/ngx-gallery

This is the image showing my gallery but only showing when I input hardcoded data not the data coming from my library Image

This is my data coming from services:

  [
    {
    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"
    }
   ]
 }
    ]

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>
Muhammad Taimur
  • 11
  • 3

1 Answers1

4

change css for the following class ngx-gallery-layout i.e

.ngx-gallery-layout {
    width: 100%;
    height: 100%; //change this  
    display: flex;
    flex-direction: column;
}

to something like

.ngx-gallery-layout {
    width: 100%;
    height: 350px; //
    display: flex;
    flex-direction: column;
}

place it in the global css(style.css) file

Shady Kip
  • 359
  • 4
  • 7