Angular Image Fullscreen Viewer

An Angular responsive image fullscreen viewer.
Also support youtube and mp4 video urls.

(Compatible with Angular Version: 11)

Features!

- Responsive
- captures swipes from phones and tablets
- Compatible with Angular Universal
- captures keyboard next/previous arrow key event for lightbox image move
- Support Images (jpeg, jpg, gif, png and Base64-String), Youtube url and MP4 video (url and Base64-String)

$3

$3

Installation

Setup :

Import module in your app.module.ts:
``typescript
import { NgImageFullscreenViewModule } from 'ng-image-fullscreen-view';
...

@NgModule({
declarations: [
AppComponent
],
imports: [
NgImageFullscreenViewModule,
...
],
providers: [],
bootstrap: [AppComponent]
})

export class AppModule {
}

`

Add component in your template file :
`html


[images]="imageObject"
[imageIndex]="selectedImageIndex"
[show]="showFlag"
(close)="closeEventHandler()">
`

Add closeEventHanler and showFlag conditions in your.component.ts :
`typescript
export class AppComponent {
showFlag: boolean = false;
selectedImageIndex: number = -1;

constructor () {}

...

showLightbox(index) {
this.selectedImageIndex = index;
this.showFlag = true;
}

closeEventHandler() {
this.showFlag = false;
this.currentIndex = -1;
}

...
}

`

ImageObject format
`js
imageObject: Array