5.10: Adding Photo Gallery

Let's add a photo gallery to our Photos tab.

To do this we'll use another library: ngx-gallery.

Read the docs if you would like to customize it.

Installing and Importing ngx-gallery

In the root of your SPA project, run the following command:

npm install ngx-gallery --save

Import it into your app.module.ts file and add it to the imports array:

import { NgxGalleryModule } from 'ngx-gallery';

//  ...

imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    NgxGalleryModule,

//  ...

Adding Gallery Logic

Next, open up the member-detail.component.ts file and start by adding two properties:

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

Next, specify the options and the images in ngOnInit():

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

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

    this.galleryImages = this.getImages();
}

And, finally, we'll implement the getImages() method to populate an array according to what ngx-gallery is expecting.

getImages() {
    const imageUrls = [];

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

    return imageUrls;
}

Add Gallery to the Template

In member-detail.component.html, currently we have a <p> with "Photos will go here."

Replace that with the following ngx-gallery directive:

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

Right now, it doesn't have much functionality. But, it will improve once we have a way for users to add more photos. Coming soon!