Tuesday, October 20, 2020
therichposts@gmail.com
Angular 10

Angular 10 Lightbox Working Tutorial

Angular Lightbox Working Tutorial

Hello to all, welcome to therichpost.com. In this post, I will tell you about, Angular 10 Lightbox Working Tutorial.

Angular 10 Lightbox

Angular10 came and if you are new then you must check below two links:

  1. Angular10 for beginners
  2. Angular10 Basic Tutorials

Here are the working code snippet for Angular 10 Lightbox Working Tutorial and code snippet, please follow carefully:

1. Here is the command you need to run to install lightbox module into your angular 10 application:

npm i ngx-lightbox

 

2. Here is the code you need to add your angular.json file:

...
{
  "styles": [
    "node_modules/ngx-lightbox/lightbox.css",
    ...
  ],
}
...

 

3. Here is the code you need to add into your app.module.ts file:

import { LightboxModule } from 'ngx-lightbox';
 
@NgModule({
  imports: [ LightboxModule ]
})

 

4. Here is the code you need to add into your app.component.ts file:

import { Lightbox } from 'ngx-lightbox';
 
export class AppComponent {
  _albums = [];
  constructor(private _lightbox: Lightbox) {
    for (let i = 1; i <= 4; i++) {
      const src = 'https://themyth92.com/project/ngx-lightbox/demo/img/image' + i + '.jpg';
      const caption = 'Image ' + i + ' caption here';
      const thumb = 'https://themyth92.com/project/ngx-lightbox/demo/img/image' + i + '-thumb.jpg';
      const album = {
         src: src,
         caption: caption,
         thumb: thumb
      };
 
      this._albums.push(album);
    }
  }
 
  open(index: number): void {
    // open lightbox
    this._lightbox.open(this._albums, index);
  }
 
  close(): void {
    // close lightbox programmatically
    this._lightbox.close();
  }
}

 

5. Here is the code you need to add into your app.component.html file:

<div *ngFor="let image of _albums; let i=index">
  <img [src]="image.thumb" (click)="open(i)" />
</div>

 

Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10 Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.