Masonry gallery for Angular
For documentation & live demo visit https://enngage.github.io/ngx-masonry-gallery/
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.
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';
@NgModule({
declarations: [
AppComponent
],
imports: [
MasonryGalleryModule
],
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[] = [
'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
});
}
}
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
