Masonry gallery for Angular 6+
Switch branches/tags
Clone or download
Latest commit 244b75c Oct 27, 2018

npm version Build Status NPM

Masonry gallery for Angular

For documentation & live demo visit

Supported versions

  1. For Angular 6 use ngx-captcha on version <= 1.x.y
  2. For Angular 7 use ngx-captcha on version >= 2.0.0

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.

I have limited time to maintain all my libraries so depending on how much traction this will gain, I will keep adding new features. To show support, please do start this repository.

Quick start

npm install ngx-masonry-gallery --save
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

Publishing lib

Under projects\ngx-captcha-lib run

npm run publish-lib

Publishing demo app

Under root, generate demo app with

npm run build-demo-gh-pages
npx ngh --dir=dist-demo