ngx-packery

Angular 2+ wrapper package around Packery by Metafizzy. This package will help you create stunning masonry grids with only few lines of code.

Table of Contents

• Installation
• Usage
• Changelog
• Paperwork
  • Contributing
  • Issue / Feature Request
  • Pull Request
• Credits
• License

Installation

npm install --save ngx-packery

yarn add ngx-packery

Usage

app.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>

Options

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.

Events

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.

Methods

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: PackeryService) {}

removeItem() {
  this.pckryService.remove('.item-2');
}

Full list of methods can be found here.

Plugins

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

Changelog

Please see Changelog Page for more information what has changed recently.

Paperwork

Contributing

Please see CONTRIBUTING.md for details.

Issue / Feature Request

To submit an issue correctly, please follow instructions

If you have an idea, and you want to request feature, then read this one

Pull Request

To crearte new pull request and add your piece of work in our project, go through this steps

Credits

• Zura Gabievi
• All contributors

License

The MIT License (MIT). Please see License file for more information.

Coming Next

• [ ] Draggable
• [ ] imagesLoaded