Masonry Image Gallery for Angular 6+

A simple responsive masonry gallery for your Angular 6+ app. This gallery is based on the awesome 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.


npm install ngx-masonry-gallery --save

Module inicialization

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


<ngx-masonry-gallery [width]='250' [images]='images'></ngx-masonry-gallery>
import { IMasonryGalleryImage } from 'ngx-masonry-gallery';
export class AppComponent {
    private urls: string[] = [
    public get images(): IMasonryGalleryImage[] {
        return => <IMasonryGalleryImage>{
            imageUrl: m


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


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


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.


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