how can i use lightbox in demo 5 angular project

I read the documentation of the metronics theme for light box use. and followed the steps but it's not working fine in the angular project.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

Hello,

May I know if you are referring to this docs page? The docs here is mostly only working for HTML version.
https://preview.keenthemes.com/html/metronic/docs/general/fslightbox

For angular, you may try this guide. To integrate fslightbox with Angular, you can follow these steps:

Install the fslightbox package using npm:

npm install fslightbox --save

Import fslightbox in your component where you want to use it:

import FsLightbox from 'fslightbox';

Create a variable for the lightbox instance:

lightbox = null;

In the ngOnInit() method of your component, initialize the lightbox instance:

ngOnInit() {
this.lightbox = new FsLightbox();
}

Add a click event to the element that you want to trigger the lightbox:

<button (click)="openLightbox()">Open Lightbox</button>

In your component, create the openLightbox() method to open the lightbox when the button is clicked:

openLightbox() {
this.lightbox.open([...]); // add your image or video URLs inside the square brackets
}

To close the lightbox, call the close() method of the lightbox instance:

this.lightbox.close();


Thanks

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(