Photo gallery

Ngx-Gallery demo

Stop ng serve.

Install with npm

npm install ngx-gallery --save

Restart ng serve

Add the Import in app.module.ts

import { NgxGalleryModule } from 'ngx-gallery';
...
imports: [
    ...
    NgxGalleryModule
    ...
],
...

Open member-detail.component.ts and add two fields for the component.

galleryOptions: NgxGalleryOptions[];
galleryImages: NgxGalleryImage[];

In ngOnInit configure the galleryOptions and put the images urls into galleryImages.

ngOnInit() {
  this.route.data.subscribe(data => {
    this.user = data['user'];
  });

  this.galleryOptions = [
    {
      width: '500px',
      height: '500px',
      imagePercent: 100,
      thumbnailsColumns: 4,
      imageAnimation: NgxGalleryAnimation.Slide,
      preview: false
    }
  ];

  this.galleryImages = this.getGalleryImages();
}

getGalleryImages() {
  const images = [];
  for (let i = 0; i < this.user.photos.length; i++) {
    const photo = this.user.photos[i];
    images.push({
      small: photo.url,
      medium: photo.url,
      big: photo.url,
      description: photo.description
    });
  }
  return images;
}

Open member-detail.component.html and substitute the placeholder with *ngx-gallery

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

Additional configuration is required for adaptivity on different screen sizes.