#Fancybox Close Button Closing Angular Material Dialog

10 messages · Page 1 of 1 (latest)

fluid mason
#

Hey everyone! I'm facing an issue with Angular Material Dialog and Fancybox slider integration. When I click the Fancybox close button, it closes BOTH the Fancybox slider AND my Material Dialog component. I only want it to close the Fancybox slider, not the entire dialog.
`export class NewsDetailDialogComponent implements OnInit, OnDestroy {
@ViewChild('sliderRef', { static: false }) sliderRef!: ElementRef;
videoUrls: string[] = [];

constructor(
@Inject(MAT_DIALOG_DATA) public data: NewsResponse,
public dialogRef: MatDialogRef<NewsDetailDialogComponent>,
) {
if (this.data?.videos?.length) {
this.videoUrls = this.data.videos.map((v: any) => v.url);
}
}

ngAfterViewInit(): void {
Fancybox.bind(this.sliderRef.nativeElement, '[data-fancybox="gallery"]', {
Html: {
videoAutoplay: false,
},
});
}

ngOnDestroy(): void {
Fancybox.unbind(this.sliderRef.nativeElement);
Fancybox.close();
}
}`

`<h2 mat-dialog-title>
<span>News Details</span>
<button class="dialog-close-btn" mat-dialog-close>
<app-svg type="close" />
</button>
</h2>

<mat-dialog-content>
<div class="news-gallery" #sliderRef>
@for (item of data.images; track $index) {
<a [href]="item.url" data-fancybox="gallery" class="gallery-item">
<img [src]="item.url" alt="Gallery image" />
</a>
}
@for (url of videoUrls; track $index) {
<a [href]="url" data-fancybox="gallery" data-type="html5video">
<video [src]="url" preload="metadata" [muted]="true"></video>
</a>
}
</div>
</mat-dialog-content>`

Has anyone successfully integrated Fancybox (or similar lightbox libraries) inside an Angular Material Dialog? How do you prevent the lightbox close button from closing the parent dialog? Any help would be greatly appreciated! 🙏
"@angular/material": "~19.2.10", "@fancyapps/ui": "^5.0.36", "@angular/cli": "^19.2.9",

jovial garden
#

could you provide a minimal stackblitz reproduction?

fluid mason
# jovial garden could you provide a minimal stackblitz reproduction?

https://stackblitz.com/edit/stackblitz-starters-msrsh2l3?description=An angular-cli project based on @angular/animations, @angular/common, @angular/compiler, @angular/core, @angular/forms, @angular/platform-browser, @angular/platform-browser-dynamic, @angular/router, core-js, rxjs, tslib and zone.js&file=package.json,src%2Fmain.ts,src%2Fnews-dialog.ts&template=node&title=Angular Starter - please take a look 🙏🙏

StackBlitz
Fancybox - Angular Material - StackBlitz

An angular-cli project based on @angular/animations, @angular/common, @angular/compiler, @angular/core, @angular/forms, @angular/platform-browser, @angular/platform-browser-dynamic, @angular/router, core-js, rxjs, tslib and zone.js

jovial garden
#

it doesn't build for me

Application bundle generation failed. [16.545 seconds]

✘ [ERROR] No matching export in "node_modules/@angular/core/fesm2022/core.mjs" for import "afterRender"

node_modules/@angular/cdk/fesm2022/overlay-module-BUj0D19H.mjs:2:121:
  2 │ ...wEncapsulation, untracked, afterRender, afterNextRender, Element...
    ╵                               ~~~~~~~~~~~
#

I think the issue resides in you using material 19 in an angular 20 project.
Please fix the dep.

jovial garden
#

I fixed the deps but cannot fix your issue.
I think fancybox is messing with focus or DOM tree in general.
Do you really need it to be shown inside the dialog (considering that in the SB it looks like fullscreen anyway)?

fluid mason
raw relic
#

If you want to prevent it from closing when pressing Esc, just add disableClose: true in the openDialog function

fluid mason
#

thank you for your time and it didn't work so I installed another library for this. It worked fine.