In Focus

Image Gallery In Angular In SharePoint SPFx App

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

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.

Angular
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.

  1. import { NgxGalleryModule } from 'ngx-gallery';  
  2. ...  
  3. @NgModule({  
  4. imports: [  
  5. ...  
  6. ...  
  7. ],  
  8. providers:[NgxGalleryModule ]  
  9. ...  
  10. })  
  11. export class AppModule { }  

Step 4

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

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

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.

  1. export class AppComponent implements OnInit {  
  2.     galleryOptions: NgxGalleryOptions[];  
  3.     galleryImages: NgxGalleryImage[];  
  4.     ngOnInit(): void {  
  5.         this.galleryOptions = [{  
  6.                 width: '600px',  
  7.                 height: '400px',  
  8.                 thumbnailsColumns: 4,  
  9.                 imageAnimation: NgxGalleryAnimation.Slide  
  10.             },  
  11.             // max-width 800  
  12.             {  
  13.                 breakpoint: 800,  
  14.                 width: '100%',  
  15.                 height: '600px',  
  16.                 imagePercent: 80,  
  17.                 thumbnailsPercent: 20,  
  18.                 thumbnailsMargin: 20,  
  19.                 thumbnailMargin: 20  
  20.             },  
  21.             // max-width 400  
  22.             {  
  23.                 breakpoint: 400,  
  24.                 preview: false  
  25.             }  
  26.         ];  
  27.         this.galleryImages = [{  
  28.             small: 'assets/1-small.jpg',  
  29.             medium: 'assets/1-medium.jpg',  
  30.             big: 'assets/1-big.jpg'  
  31.         }, {  
  32.             small: 'assets/2-small.jpg',  
  33.             medium: 'assets/2-medium.jpg',  
  34.             big: 'assets/2-big.jpg'  
  35.         }, {  
  36.             small: 'assets/3-small.jpg',  
  37.             medium: 'assets/3-medium.jpg',  
  38.             big: 'assets/3-big.jpg'  
  39.         }];  
  40.     }  
  41. }  

Step 5

Use the ngx-gallery component in your html

  1. // app.component.html  
  2. <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.