Masonry Image Gallery for Angular 6+

by Posted on

A simple responsive masonry gallery for your Angular 6+ app. This gallery is based on the awesome https://masonry.desandro.com/methods.html#remove which is very well maintained and fully tested. This implementation handles images load event to ensure nice transition and also allows you to easily add/remove images as you can see from demo.
angular-image-gallery


Installation

npm install ngx-masonry-gallery --save

Module inicialization

import { NgModule } from '@angular/core';
import { MasonryGalleryModule } from 'ngx-masonry-gallery';
import { AppComponent } from './app.component';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    MasonryGalleryModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Usage

<ngx-masonry-gallery [width]='250' [images]='images'></ngx-masonry-gallery>
import { IMasonryGalleryImage } from 'ngx-masonry-gallery';
 
export class AppComponent {
 
    private urls: string[] = [
        'https://www.ogttx.org/wp-content/themes/ogt/media/_frontend/img/bkg.jpg',
        'http://www.magicalkenya.com/wp-content/uploads/2014/08/homebannerimg4.jpg',
        'https://media.gadventures.com/media-server/cache/12/59/12591a5497a563245d0255824103842e.jpg',
        'https://i.pinimg.com/originals/1c/aa/c5/1caac55143e3e11461c6ae5962403deb.jpg',
        'http://littleguyintheeye.com/wp-content/uploads/2014/08/nature-3.jpg',
    ];
 
    public get images(): IMasonryGalleryImage[] {
        return this.urls.map(m => <IMasonryGalleryImage>{
            imageUrl: m
    });
  }
}



Configuration

Property Type Description
width number Width of the column in pixels
gutter number Size of gutter between columns in pixels
verticalGutter number Size of the gutter between particular items in pixels. Can be combined with gutter to create all around gutter.
imageClasses string[] Array of classes added to images for custom styling

Methods

Method Input Description
addImages IMasonryGalleryImage[] Adds given images to gallery
removeImages IMasonryGalleryImage[] Removes selected images from gallery

Events

Event Type Description
clickImage Output Executes when an image is clicked. IMasonryGalleryImage is passed to event.
layoutComplete Output See layoutComplete. Contains layout items.
removeComplete Output See removeComplete. Contains removed items.

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by Enngage. Visit their official github repository for more information and follow for future updates.


Published by admin