Image Gallery in Angular 4 in SharePoint SPFx App

The SharePoint framework (SPFx) is a recently revealed technology by Microsoft which that works as 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 image one at a time.  

Since, we are developers, we could create e-commerce web application like Amazon, Flipkart. These types of applications mainly play with images/photos. So, we need to concentrate on displaying multiple images and displays in one layout.  

Image Gallery in Angular 4have been assigned the same kind of project and seek solution, and then I found ngx-gallery readymade angular component to attain the same. 

Feature of this component:

1. Image preview
2. Full screen image
3. Image scrolling
4. Previous and next arrows

Let me take you through step by step procedure with sample codes.

Step 1:

we need to install font-awesome. Use below command to install it.

npm install font-awesome –save


Note: This tool uses some icons like 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 below command

npm install ngx-gallery –save

Step 3:

Register ngx-gallery in app module on providers array

import { NgxGalleryModule } from ‘ngx-gallery’;


    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’;


    templateUrl: ‘./app.component.html’,

    styleUrls: [‘./app.component.scss’],


Here I use two arrays, one for look and feel and the other one for image source.

Source array has three key-value pair to show and three different size of images. Also, you can use one image instead of three and 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>

I hope this article helps you. Comment below, if you have queries regarding this article. 

Sharing is Caring!

Leave a Reply

Your email address will not be published. Required fields are marked *