ngx-super-dialog-gallery

Simple, easy and performance dialog gallery (image , video , content) for angular. (subport for angular v.15).

Demo

• Stackblitz

Usage

1. Install

npm install ngx-super-dialog-gallery --save

import NgxDialogGalleryModule。

import { NgxDialogGalleryModule } form "ngx-super-dialog-gallery";

@NgModule({
  imports: [BorwserModule, NgxDialogGalleryModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})

export class AppModule {}

2. Template

<ng-template let-data #gallery>
  <ngx-dialog-gallery [isShowZoomIcon]="true" [tooltipCloseText]="'กดปุ่ม Esc เพื่อปิด'" [isShowFullscreenIcon]="true" [isShowFullscreen]="false" [tooltipFullscreenText]="'ออกจากโหมดเต็มจอ'" [tooltipMinimizeFullscreenText]="'เข้าสู่โหมดเต็มจอ'" [isAction]="isAction" [classOverlay]="[]" (eventClose)="clickClose($event)" (eventChange)="clickTurn($event)">
    <ng-container content></ng-container>
  </ngx-dialog-gallery>
</ng-template>

Method

Name	Description
clickClose()	click to close dialog gallery.
clickZoom()	click to zoom image, not zoom video.
clickNavigateBefore()	click image or video before.
clickNavigateNext()	click image or video next.
checkIsArray()	check data value array or object.
checkType()	check type data value image or video.

How call component methods

@ViewChild('gallery', { read: TemplateRef, static: false })
public gallery!: TemplateRef<any>;

public clickOpenDialogGallery(index: number, item: any) {
    this.dialogRef = this.dialog.open(this.gallery, {
        autoFocus: false,
        restoreFocus: false,
        data: {
            index: item ? index : null,
            gallery: this.galleryImages
        }
    });

    this.dialogRef.afterClosed().subscribe((result: any) => {
        if (result) {

        }
    });
}

API

Config

Name	Type	Default	Summary
isShowZoomIcon	boolean	true	For showing the icon to zoom the image.
tooltipCloseText	string	กดปุ่ม Esc เพื่อปิด	Text to be displayed when closing.
isShowFullscreenIcon	boolean	true	For showing the icon to fullscreen the image and video.
isShowFullscreen	boolean	false	for full screen.
tooltipFullscreenText	string	ออกจากโหมดเต็มจอ	Text to be displayed when fullscreen.
tooltipMinimizeFullscreenText	string	เข้าสู่โหมดเต็มจอ	Text to be displayed when minimized fullscreen.
classOverlay	string[]	['']	add class in overlay.
isAction	boolean	true	Actions that affect (clickClose, clickNavigateBefore, clickNavigateNext)
eventClose	EventEmitter<any>	-	Events
eventChange	EventEmitter<any>	-	Events