How to use

The lightbox will be created from the URLs or paths provided to the "sources" array prop. There is no need to specify the types of the sources, it's done automatically. To open the lightbox use the "toggler" boolean prop. On every update of this prop, the lightbox will open. The value of the "toggler" prop 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'
	];
}