1

I have been trying to use lightGallery in my Angular 4 project, I am able to make it work by adding these to the index.html file

 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/lightgallery.min.js"></script>

and then

<script>
    lightGallery(document.getElementById('lightgallery'));
</script>

Problem How do I use the lightGallery within angular code (typescript), as I can invoke lightGallery() upon loading the (dynamic content)pictures?

I have tried many options like this

or How can I use custom JavaScript code in an angular component?

2
  • 1
    have you seen this post ?
    – vardius
    Commented Feb 2, 2018 at 1:52
  • thanks! yes, I have followed similar articles. I was able to use jQuery and other libraries that way, but I couldn't make lightGallery library work. Commented Feb 4, 2018 at 20:23

1 Answer 1

2

I was able to use the library after the steps described below

  1. Add lightgallery.js library file to a local folder (assets)

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

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

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

    @import "~lightgallery.js/dist/css/lightgallery.css"; // add this on top of style.css

  4. Add this line of code on top of the component class file, where it is needed

    declare var lightGallery: any; // this will prevent typescript compiler complaining about "lightGallery" not found

  5. Invoke lightGallery anywhere within the component as below

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.