Lib-dialog-gallerys NPM

ngx-dialog-gallery

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

Demo

Stackblitz

Usage

1. Install

npm install ngx-dialog-gallery --save

import DialogGalleryModule。

import { DialogGallery } form "DialogGallery";

@NgModule({
  imports: [BorwserModule, DialogGallery],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

2. Template

<ng-template let-data #gallery>
  <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>
  </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>;

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

tslib

@everything-registry/sub-chunk-2065

0.0.1

3 years ago