Angular 2+ wrapper package around Packery by Metafizzy. This package will help you create stunning masonry grids with only few lines of code.
npm install --save ngx-packeryyarn add ngx-packeryapp.module.ts
import { NgModule } from '@angular/core';
import { NgxPackeryModule } from 'ngx-packery';
import { AppComponent } from './app.component';
@NgModule({
declarations: [ AppComponent ],
imports: [ NgxPackeryModule ],
bootstrap: [ AppComponent ]
})
export class AppModule { }app.component.html
<ngx-packery>
<ngx-packery-item>
<img src="IMAGE_URL_1" alt="Image #1">
</ngx-packery-item>
<ngx-packery-item>
<img src="IMAGE_URL_2" alt="Image #2">
</ngx-packery-item>
</ngx-packery>You can pass options input to ngx-packery element;
<ngx-packery [options]="{ gutter: 10 }">
<!-- ITEMS -->
</ngx-packery>or create object inside app.component.ts using interface NgxPackeryOptions and pass to element;
pckryOptions: NgxPackeryOptions = {
columnWidth: 150,
rowHeight: 100
};<ngx-packery [options]="pckryOptions">
<!-- ITEMS -->
</ngx-packery>Full list of options can be found here.
Packery element outputs some events;
For example when layout is complete you will catch it using layoutComplete output:
<ngx-packery (layoutComplete)="handleLayoutComplete($event)">
<!-- ITEMS -->
</ngx-packery>Full list of events can be found here.
If you want to call some methods on packery element, you can use service created speacially for this;
For example if you want to remote element from grid you can do it:
constructor(private pckryService: NgxPackeryService) {}
removeItem() {
this.pckryService.remove('.item-2');
}Full list of methods can be found here.
If you want to have dragging functionallity, you can pass draggabilly: true as option. It's using Draggabilly library
If you want to order grid after images has been loaded, you can pass imagesLoaded: true as option. It's using imagesLoaded library
Please see Changelog Page for more information what has changed recently.
Please see CONTRIBUTING.md for details.
To submit an issue correctly, please follow instructions
If you have an idea, and you want to request feature, then read this one
To crearte new pull request and add your piece of work in our project, go through this steps
The MIT License (MIT). Please see License file for more information.
- Draggable
- imagesLoaded