Categories

Friday, November 15, 2024
#919814419350 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

therichpost
the authortherichpost
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 19, MedusaJs, Next.js, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

2 Comments

Leave a Reply

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