ngx-super-dialog-gallery v0.0.2

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

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