CODEWITHSUNDEEP
angulartypescriptgetimage-gallery
aquaforce
aquaforce

Reputation: 23

How to get images from get request inside gallery on angular 10 using ng-gallery for angular?

I am stuck at some hard code method to bring images from an api directly into the gallery or lightbox... I coudn't find any tutorials , so i found this example:

https://stackblitz.com/edit/ngx-gallery-imageviewer

And i tried to change it for my code and I managed to get images in arrays , but I don't know how to pass them into property like this dude does or something similar..

I'm stuck at this point where I must pass my images to that variable with some properties:

Image

My code:

 allImages: PostG[] = [];

fetch(this.apiKey)
  .then(response => {
    if (response.ok) {
      return response.json();
    };
  })
  .then((j: any) => {
   
    const image = [...j.data.post.map(item => item.images)];
    
    image.forEach((image: PostG[]) => {
      var obj = {
        image:image,
      }
      this.allImages = [...image];
  return{
        type: "imageViewer",
        imagesGallery: {
        srcUrl: console.log(this.allImages),
        previewUrl: console.log(this.allImages)
      }
    }
  });
});

This code gives me this result below.

enter image description here

If you can check the stackblitz you can see in that example he use local images , in my case how i should manage to get my photos ? I want to *ngFor every gallery for each post I get with the post images..

Here is my HTML as i tried to do:

<ion-col class="ion-no-padding" size-md="12" size-lg="12" size-sm="12" size-xs="12" *ngFor="let post of allPosts | sortPipe"> 

//then the gallery inside:

<div class="basic-container">
    <h2>Basic Example</h2>
    <gallery id="basic-test" fluid [items]="items" [itemTemplate]="itemTemplate" [gestures]="false"></gallery>
  </div>

  <!-- create a template to use the imageviewer -->
  <ng-template #itemTemplate let-index="index" let-type="type" let-data="{{this.allImages}}" let-currIndex="currIndex">
    <ng-container *ngIf="type === 'imageViewer' && index === currIndex" >
      <ngx-imageviewer [src]="this.allImages"></ngx-imageviewer>
    </ng-container>
  </ng-template>

Sorry if my question is too long , i just want to give you all the info for helping me. I need this for a big project. Thank you!

Upvotes: 0

Views: 1385

Answers (1)

Farhat Zaman
Farhat Zaman

Reputation: 1369

you need to create JSON from your response according to ngx-gallery.

for more explanation check this example.

i tried to create the same scenario as currently you are facing right now

try something like this.

this.response.data.post.forEach(post => {
  post.galleryImages = post.images.map(image => {
    return new ImageItem({ src: image, thumb: image });
  });
});

and after JSON creation in your HTML file

<div class="basic-container" *ngFor="let post of response.data.post; let i=index">
    <h2>{{post.title}}</h2>
    <p>{{post.description}}</p>
    <gallery id="basic-test_{{i}}" fluid [items]="post.galleryImages" [gestures]="false">
    </gallery>
</div>

Upvotes: 1

Related Questions