zgabievi / ngx-packery

Angular 2+ wrapper package around https://packery.metafizzy.co/. This package will help you create stunning masonry grids with only few lines of code.

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

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

ngx-packery's Issues

Feature Request: Create a demo

Hey! I think the lib could be very useful, but it's hard to quickly see without a working demo.

CommonJS dependency warning

Angular Version: 10

When building I get this Warning:
"CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies"

I can disable the warning following the instructions in the link. With that said, is there any plan to fix the warning in a future release?

Thanks a lot!

ngFor Support?

Any future plans to support *ngFor on <ngx-packery-item> elements?

e.g.

<ngx-packery>
     <ngx-packery-item 
          *ngFor="let item of items"
          [style.width.px]="item.width"
          [style.height.px]="item.height">
     </ngx-packery-item>
</ngx-packery>