Custom sources
With the "sources" prop you can also display custom content—such as a Vimeo video, Google map, etc. A custom source must be an Angular component.
import { Component } from "@angular/core";
import { FsLightbox } from "fslightbox-angular";
import { Vimeo } from "./Vimeo";
import { GoogleMap } from "./GoogleMap";
import { Text } from "./Text";
@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 = [
Vimeo,
GoogleMap,
Text
];
}An example custom source (a Vimeo video):
import { Component } from "@angular/core";
@Component({
template: `<iframe
src="https://player.vimeo.com/video/22439234"
width="1920px"
height="1080px"
frameBorder="0"
allow="autoplay; fullscreen"
allowFullScreen
></iframe>`
})
export class Vimeo {}