Angular Modal and Image Gallery with Thumbnails

ngx-image-gallery is probably the best modal and included image gallery for Angular 4+. angular upgrade photo gallery ng.

angular image gallery grid, image gallery in angular, angular image gallery with thumbnails example, npm angular image gallery, ngx image gallery github, image gallery angular material

Make gallery inline

You can make the gallery inline like a carousel by setting conf.inline it to true but be sure to change conf.backdropColor as well if you need a white background color. Also, the gallery width and height can be adjusted by manually applying CSS styles using! The flag is important in the exhibition element.

How to make use of it:

Install

npm install --save @web-aid-kit/ngx-image-gallery

Then import hammerjs into your project:

import 'hammerjs';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
    enableProdMode();
}

document.addEventListener('DOMContentLoaded', () => {
    platformBrowserDynamic().bootstrapModule(AppModule)
        .catch(err => console.log(err));
});

// app.component.html

<ngx-image-gallery 
[images]="images" 
[conf]="conf"
(onOpen)="galleryOpened($event)"
(onClose)="galleryClosed()"
(onImageClicked)="galleryImageClicked($event)"
(onImageChange)="galleryImageChanged($event)"
(onDelete)="deleteImage($event)"
></ngx-image-gallery>

elegant image gallery for angular, ngx-image-gallery Plugin/Github