How can I user lightgallery with Angular 7 project?

Question

I have added its script to angular.json file.

"scripts": ["./src/assets/js/lightgallery.js"] 

and its styles to style.scss file

@import "./assets/externals/lightgallery.css";

and in my component I have tried that:

declare var lightGallery: any;

ngOnInit() {
   lightGallery(document.getElementById('lightgallery'));
}

and its giving the error:

ERROR ReferenceError: lightGallery is not defined

Any suggestion what I am doing wrong?

Answer 1

Retry the following:

1. Add lightgallery.js file to assets folder

2. Add the file path to the scripts array of the angular.json

   "scripts": [ "../src/assets/js/lightgallery.min.js" ]

3. Import lightgallery.css file in the style.scss file

   @import "~lightgallery.js/dist/css/lightgallery.css";

4. Add this line of code on top of the component .ts file

   declare var lightGallery: any;

5. Use it as below:

   lightGallery(document.getElementById('lightgallery'));