Image Gallery In Angular In SharePoint SPFx App

The SharePoint framework (SPFx) is a newly-revealed technology by Microsoft which works as a client-side model and supports open source tools. It is mostly recommended for SharePoint online.

Galleries are used to display the images/photos in thumbnail grid or layouts or a carousel which can be scrolled through to view images one by one.

Since we are developers, we could create e-commerce web application like Amazon or Flipkart. This type of application mainly plays with images/photos. So, we need to put extra concentration into displaying images and displaying multiple images in one layout.

I was also assigned the same kind of project and sought a solution. Then, I found an ngx-gallery readymade Angular component to attain it.

The features of this component

• Image preview
• Full-screen image
• Image scrolling
• Previous and next arrows

Let us take you through step by step with sample code.

Step 1

We need to install font-awesome. Use the below command to install.

npm install font-awesome --save

Note
This tool uses some icons like a forward arrow and backward arrow. The icons are referred from font-awesome.

Step 2

Now, we are going to install ngx-gallery in your project using the below command.

npm install ngx-gallery --save

Step 3

Register ngx-gallery in app module on providers array.

import { NgxGalleryModule } from 'ngx-gallery';
...
@NgModule({
imports: [
...
...
],
providers:[NgxGalleryModule ]
...
})
export class AppModule { }

Step 4

Import in your component. Here, I am using In-App.component.

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation } from 'ngx-gallery';
...
@Component({
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
})

Here, I am using two arrays - one for the look and feel and the other one for image source.

Source array has three key-value pairs to show three different sizes of images. Also, you can use one image instead of three it will resize automatically.

export class AppComponent implements OnInit {
    galleryOptions: NgxGalleryOptions[];
    galleryImages: NgxGalleryImage[];
    ngOnInit(): void {
        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 = [{
            small: 'assets/1-small.jpg',
            medium: 'assets/1-medium.jpg',
            big: 'assets/1-big.jpg'
        }, {
            small: 'assets/2-small.jpg',
            medium: 'assets/2-medium.jpg',
            big: 'assets/2-big.jpg'
        }, {
            small: 'assets/3-small.jpg',
            medium: 'assets/3-medium.jpg',
            big: 'assets/3-big.jpg'
        }];
    }
}

Step 5

Use the ngx-gallery component in your html

// app.component.html
<ngx-gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>

Using the above steps, you can finish your image gallery task. I hope this article helps you. Comment below, if you have queries regarding this article.