This content originally appeared on DEV Community and was authored by Rajesh Kumar Yadav
Demo -
Step 1 - Install lightobox
Open your terminal and run below command -
npm install --save ngx-lightbox
Step 2 - Update your angular.json
{ "styles": ["./node_modules/ngx-lightbox/lightbox.css", ...],}
Step 3 - Add Lightbox Module to your app.module.ts
import { LightboxModule } from 'ngx-lightbox'; @NgModule({ imports: [LightboxModule]})
You can do the next steps in your choice of components but I am assuming I need to make lightbox in app.component.html
Step 4 - Add markup to html of your component
app.component.html
<div *ngFor="let image of _albums; let i=index"> <img [src]="image.thumb" (click)="open(i)" /></div>
Step 5 - Add lightbox code to your component's ts file,
app.component.ts
import { Lightbox } from 'ngx-lightbox';
export class AppComponent {
private _album: Array = [];
constructor(private _lightbox: Lightbox) {
for (let i = 1; i <= 4; i++) {
const src = 'demo/img/image' + i + '.jpg'; const caption = 'Image ' + i + ' caption here';
const thumb = '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();
}}
With all that being said, I highly recommend you keep learning!
Thank you for reading this article. Please feel free to connect with me on LinkedIn and Twitter.
This content originally appeared on DEV Community and was authored by Rajesh Kumar Yadav
Rajesh Kumar Yadav | Sciencx (2021-06-07T06:49:51+00:00) Angular : How to add lightbox in your angular project just in 10 minutes?. Retrieved from https://www.scien.cx/2021/06/07/angular-how-to-add-lightbox-in-your-angular-project-just-in-10-minutes/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.