Angular Fullscreen Lightbox

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

@Component({
	selector: 'app-root',
	imports: [FsLightbox],
	template: `<div>
		<fslightbox 
			[toggler]="toggler"
			[slide]="slide"
			[sources]="sources"
  		/>
		<button (click)="open(1)">
			The first slide
		</button>
		<button (click)="open(2)">
			The second slide
		</button>
	</div>`
})
export class Demo {
	toggler = false;
	slide = 1;
	sources = [
		'https://i.imgur.com/fsyrScY.jpg',
		'https://www.youtube.com/watch?v=xshEZzpS4CQ',
		'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
		{
			component: Text,
			inputs: {
				value: "An example message"
			}
		}
	];
	open(n : number) {
		this.slide = n;
		this.toggler = !this.toggler
	}
}

If you want to see more advanced options, visit the documentation.