AngularMagnificPopup

Angular Image Gallery Library

1. npm i jquery @types/jquery magnific-popup angular-magnific-popup
2. in angular.json under styles and scripts add:

"styles": [
    "node_modules/magnific-popup/dist/magnific-popup.css"
],
"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/magnific-popup/dist/jquery.magnific-popup.min.js"
]

3. In the angular module, import { MagnificPopup } from 'angular-magnific-popup' and add "MagnificPopup" to the imports array;

4. Example usage in the html file:

<div magnificPopup>
  <a href="https://picsum.photos/200">
    <img src="https://picsum.photos/200" />
  </a>
  <a href="https://picsum.photos/300">
    <img src="https://picsum.photos/300" />
  </a>
  <a href="https://picsum.photos/400">
    <img src="https://picsum.photos/400" />
  </a>
</div>

DEMO: https://angular-libs-showcase.web.app/magnific-popup