Written by

Packiaraj Santhiyagu




see all categories
intranet as a service

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 4I have 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. 

Packiaraj Santhiyagu

Written by Packiaraj Santhiyagu

Packiaraj, we rechristened him ‘Bahubali’, although not for his muscular attire or his ability to confront elephants, but his persistence to find a solution for every SharePoint issue he encounters. A cool guy who responds even to grave situations with his calm smile. He has been with Hubfly and the product development since its inception.