ngx-super-dialog-gallery
Simple, easy and performance dialog gallery (image , video , content) for angular. (subport for angular v.15).
Demo
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 |