Hi,

Could you please try following these instructions? It seems this issue has been addressed before:

https://devs.keenthemes.com/question/how-can-i-use-lightbox-in-demo-5-angular-project

Thank you.

Hi Faizal,

Please have a look at error I am getting after following your instructions.

Error: src/app/pages/listings-details/listings-details.component.ts:14:29 - error TS7016: Could not find a declaration file for module 'fslightbox'. '/var/www/frontend/node_modules/fslightbox/index.js' implicitly has an 'any' type. Try npm i --save-dev @types/fslightbox if it exists or add a new declaration (.d.ts) file containing declare module 'fslightbox';

14 import * as fslightbox from "fslightbox"; ~~~~~~~~~~~~

Error: src/app/pages/listings-details/listings-details.component.ts:303:8 - error TS2304: Cannot find name 'refreshFsLightbox'.

303 refreshFsLightbox(); ~~~~~~~~~~~~~~~~~

✖ Failed to compile.

Thanks Faizal for the information I will follow the instructions that you have suggested and will let you know is it working or not.

Hi

1. You can install fslightbox plugin for your Angular

npm install fslightbox

2. Include FSLightbox in Your Component

In your your-component.component.ts

import { Component, OnInit, AfterViewInit } from '@angular/core';
import * as fslightbox from 'fslightbox';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements OnInit, AfterViewInit {
  ngOnInit(): void {} 

  ngAfterViewInit(): void { 
    // Initialize FSLightbox after the view is rendered
    refreshFsLightbox(); 
  }
}

In your your-component.component.html

Explanation:

The import * as fslightbox from 'fslightbox'; line brings the FSLightbox library into your Angular component. The ngAfterViewInit lifecycle hook ensures that FSLightbox is initialized only after the component's view has been fully rendered. The data-fslightbox attribute on your links or image elements tells FSLightbox to handle them. You can customize the behavior with additional attributes (see the FSLightbox documentation). The refreshFsLightbox() function is a global function provided by the FSLightbox library. It is used to refresh the lightbox instance whenever new elements with the data-fslightbox attribute are added to the DOM.

Example - Adding Multiple Images

Yes

Hi,

Sorry for the late reply.

Could you please provide more info? Are you referring to Metronic 8 Angular and want to use this FSlightbox plugin?

Regards.