-
Notifications
You must be signed in to change notification settings - Fork 129
Custom templates for lightbox
Murhaf Sousli edited this page Jul 13, 2023
·
1 revision
The usage is similar to usage of custom templates in the gallery, however, we need to get a reference to the template and pass it to the gallery config.
Example:
@Component({ ... })
export class LightboxExampleComponent {
// Reference to the image template
@ViewChild(GalleryImageDef, { static: true }) imageDef: GalleryImageDef;
constructor(public gallery: Gallery) {
}
ngOnInit() {
this.gallery.ref('lightbox', {
imageTemplate: this.imageDef.templateRef
}).load(this.items);
}
}
in the template:
<div *galleryImageDef="let item">
{{ item.alt }}
</div>
The templates can also be set using galleryRef.setConfig()
as needed
this.galleryRef.setConfig({
thumbTemplate: this.thumbDef.templateRef,
boxTemplate: this.boxDef.templateRef
});