Skip to content

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

License

Notifications You must be signed in to change notification settings

zgabievi/ngx-packery

Repository files navigation

ngx-packery

NPM Version NPM Size + Gzip NPM Downloads NPM License

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

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

License

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

Coming Next

  • Draggable
  • imagesLoaded

About

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

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published