Angular 11 Lightbox Popup Image Carousel Tutorial

In this tutorial, you wil find out how to create an image carousel/slider with a lightbox popover effect in angular with ng-image-slider library from scratch.

A Lightbox popup is a UI component that appears on a browser’s window to display useful information, its a specific type of CTA (call to action) (CTA). Ideally, this is added to the web page and wants the user to take action, such as downloading some data, signin, signup, checkout; however, in this tutorial, we will show large images in a lightbox popup.

Implementing a Lightbox popup in angular is easy; it can be done via a simple Angular Image Slider with Lightbox package. It is known as ng-image-slider; this package comes with excellent and cool features.

It is responsive, and you can run it on every device; you can track captures from phones and tablets, it allows you to create an image Lightbox popup in angular; even more, it supports angular universal.

Setting Up Angular Project

Initially, you have to install angular CLI on your system to get started with angular.

npm install -g @angular/cli

Next, get to the terminal and run command to install an angular app, ignore this step if app is already created:

ng new ng-demo

Head over to the project root:

cd ng-demo

Add Lightbox Popup Package

Open the terminal and execute the suggested command to add ng-image-slider library into angular the project:

npm install ng-image-slider

Register NgImageSliderModule in App Module

The NgImageSliderModule has to be added to the main app module file; this way, it will be available to use throughout the angular components. Hence import the NgImageSliderModule module and also include it in the imports array.

Update the app.module.ts file:

import { NgImageSliderModule } from 'ng-image-slider';
...
 
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        NgImageSliderModule,
        ...
    ],
    providers: [],
    bootstrap: [AppComponent]
})
 
export class AppModule {
}

Create Lightbox Slider

You can now build a simple Lightbox popup carousel; consequently, follow the instructions given below.

The ng-image-slider directive will initiate the image Lightbox slider, don’t forget to pass the Image object name.

Update the app.component.html file:

<ng-image-slider [images]="imgObject" #nav></ng-image-slider>

Create an image object with image items, and each item has the proper data of images such as image path, alt, and title.

Update the app.component.ts file:

import { Component } from '@angular/core';
    
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {

  constructor() { }

  ngOnInit(): void { }
   
  imgObject: Array<object> = [
      {
        image: 'https://via.placeholder.com/600.png/09f/fff',
        thumbImage: 'https://via.placeholder.com/1200.png/09f/fff',
        title: 'Slider 1',
        alt: 'Hello World 1',
      }, {
        image: 'https://via.placeholder.com/600.png/021/fff',
        thumbImage: 'https://via.placeholder.com/1200.png/021/fff',
        title: 'Slider 2',
        alt: 'Hello World 2'
      }, {
        image: 'https://via.placeholder.com/600.png/321/fff',
        thumbImage: 'https://via.placeholder.com/1200.png/321/fff',
        title: 'Slider 3',
        alt: 'Hello World 3'
      }, {
        image: 'https://via.placeholder.com/600.png/422/fff',
        thumbImage: 'https://via.placeholder.com/1200.png/422/fff',
        title: 'Slider 4',
        alt: 'Hello World 4'
      }, {
        image: 'https://via.placeholder.com/600.png/654/fff',
        thumbImage: 'https://via.placeholder.com/1200.png/654/fff',
        title: 'Slider 5',
        alt: 'Hello World 5'
      }
  ];
  
}

Run Angular App

Execute command to run angular app:

ng serve

Here is the url that can help you test the app:

http://localhost:4200

Lightbox Image Carousel in Angular

Conclusion

Finally, the Angular 11 Lightbox popup image carousel tutorial is finished; Now, you have ultimately got to know how to implement and use the Lightbox image slider in angular.