FAQ

A correct URL was passed but the lightbox displays an "Invalid source" message.

Most likely an external URL without the CORS enabled was used, so the lightbox cannot detect its type automatically. The issue can by solved by manually setting the source's type, or enabling the CORS of the given resource, or putting the file on the local server.

How to set inputs of components passed to the lightbox?

Instead of passing a component, pass an object with the component set to the "component" property and the inputs set to the "inputs" property. For example:

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

@Component({
	selector: 'app-root',
	imports: [FsLightbox],
	template: `<div>
		<fslightbox 
			[toggler]="toggler"
			[sources]="sources"
		/>
		<button (click)="toggler=!toggler">
			Open the lightbox 
		</button>
	</div>`
})
export class App {
	toggler = false;
	sources = [
		{
			component: Article,
			inputs: {
				title: 'An example title',
				text: 'An example description'
			}
		}
	]
}