Topic: MDB Angular Lightbox - Outside Access
stokkup2313 priority asked 1 year ago
Hello! This is my first time using MDB Angular & I'm having trouble getting "Outside Access" to work for MDB Angular Lightbox.
Documentation I've been following: https://mdbootstrap.com/docs/b5/angular/components/lightbox/#docsTabsOverview
*_Expected behavior_*My goal is to have an on click function on an
<img> to open a different existing
<mdb-lightbox> component that lives inside an
*_Actual behavior_*Clicking on the my desired
<img> throws an error on console
*_Resources (screenshots, code snippets etc.)_*Console Error:
Code: HTML file https://www.codepile.net/pile/a56dPB2R
Typescript file where I'm importing all
I will happily provide more information upon request. Thank you in advance!
The approach you used here is correct, but you would need to somehow add components from
ng-template to the DOM because in this case they are not rendered and that's why you cannot access the
productLightbox method. If you need to hide the component/components it would be better to remove them with CSS instead of ng-template.
<mdb-lightbox class="lightbox"> <img mdbLightboxItem src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp" [img]="'https://mdbootstrap.com/img/Photos/Slides/3.webp'" alt="Photo Image" class="w-100" id="lightboxToggler" (click)="productLightbox.open(other)" /> </mdb-lightbox> <mdb-lightbox #productLightbox class="lightbox" style="display: none"> <div class="col-md-12"> <img mdbLightboxItem #other="mdbLightboxItem" src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp" [img]="'https://mdbootstrap.com/img/Photos/Slides/1.webp'" alt="Photo Image" class="w-100" /> </div> <div class="col-md-12"> <img mdbLightboxItem src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp" [img]="'https://mdbootstrap.com/img/Photos/Slides/2.webp'" alt="Side Image" class="w-100" /> </div> <div class="col-md-12"> <img mdbLightboxItem src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp" [img]="'https://mdbootstrap.com/img/Photos/Slides/3.webp'" alt="Back Image" class="w-100" /> </div> </mdb-lightbox>
However, in this case, there will still be a problem with the original lightbox, because if you don't remove the
mdbLightboxItem directive from the image you use to open the second lightbox, both components will be opened at the same time.
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
- User: Priority
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 1.6.1
- Device: Desktop
- Browser: Google Chrome
- OS: MacOS Monterey 12.2.1
- Provided sample code: Yes
- Provided link: Yes