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.
Installation
npm install ngx-masonry-gallery --save |
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 { } |
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> |
<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
});
}
} |
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.
This awesome plugin is developed by Enngage. Visit their official github repository for more information and follow for future updates.
Related
