How to use

The lightbox will be created from the URLs or paths provided to the "sources" array input. There is no need to specify the types of the sources, it's done automatically. To open the lightbox use the "toggler" boolean input. On every update of this input, the lightbox will open. The value of the "toggler" input doesn't matter, what matters is its update. You don't need to conditionally render the lightbox component.

import { Component } from "@angular/core";
import { FsLightbox } from "fslightbox-angular";

@Component({
	imports: [FsLightbox],
	template: `<div>
		<fslightbox 
			[toggler]="toggler"
			[sources]="sources"
  		/>
		<button (click)="toggler=!toggler">
			Open the lightbox
		</button>
	</div>`
})
export class App {
	toggler = false;
	sources = [
		'https://i.imgur.com/fsyrScY.jpg',
		'https://www.youtube.com/watch?v=TW9d8vYrVFQ',
		'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
	];
}

Angular 16–19

Import the lightbox from the "16-19.mjs" file:

import { FsLightbox } from "fslightbox-angular/16-19";