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.