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>
|
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 => {
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
