Using Packery with Angular 2

Question

I can't seem to get Packery working with Angular 2 using angular-cli and typescript 2.0. I'm using Packery 1.4.1 and the typescript definitions for that version from DefinitelyTyped.

The issue is that the Packery reference to Outlayer cannot be found when running the project with ng serve.

Specifically the following exception is thrown due to that:

TypeError: Cannot set property 'position' of undefined at Object.utils.extend (eval at webpackJsonp.82.module.exports

Below is my code for the project.

Scripts section from angular-cli.json:

"scripts": [
        "../node_modules/packery/dist/packery.pkgd.js"],

I have also tried adding the dependent js files but the exception thrown is the same:

"scripts": [
        "../node_modules/packery/dist/packery.pkgd.js",
        "../node_modules/get-size/get-size.js",
        "../node_modules/outlayer/outlayer.js",
        "../node_modules/ev-emitter/ev-emitter.js",
        "../node_modules/fizzy-ui-utils/utils.js",
        "../node_modules/desandro-matches-selector/matches-selector.js"
        ],

app.component.ts:

import { Component, ViewChild, AfterViewInit } from '@angular/core';
declare var Packery: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit
{
  @ViewChild('grid') grid;

  private pckry: any;
  constructor() {}

  ngAfterViewInit(){
    this.pckry = new Packery(this.grid, {
      itemSelector: '.grid-item'});
  }
}

app.component.html

<div #grid class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

I would like help on how to get Packery to run in Angular 2 with or without typings (vanilla js would be ok for me).

score 3 · Accepted Answer · answered Feb 15 '17 at 07:37

The issue with the above was that I did not use the "nativeElement" property of the grid. This will work:

var packery = new Packery(this.grid.nativeElement, {
itemSelector: '.grid-item', columnWidth: 100 });

Also the only script needed in the scripts section of angular-cli is the following:

"scripts": [
        "../node_modules/packery/dist/packery.pkgd.js"        
        ]

To add draggability use "npm install draggability --save" and add another script to the scripts section of angular-cli:

"scripts": [
        "../node_modules/packery/dist/packery.pkgd.min.js",
        "../node_modules/draggabilly/dist/draggabilly.pkgd.min.js"        
        ]

Then update the component class as well:

import { Component, ViewChild, AfterViewInit } from '@angular/core';
declare var Packery: any;
declare var Draggabilly: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit
{      
  @ViewChild('grid') grid;   

  constructor() {}

  ngAfterViewInit(){
      var packery = new Packery(this.grid.nativeElement, {
        itemSelector: '.grid-item', columnWidth: 100 });

      packery.getItemElements().forEach( function( itemElem ) {
        var draggie = new Draggabilly( itemElem );
        packery.bindDraggabillyEvents( draggie );
      });         
  }
}

Have you ever needed to refresh the grid? If so, how did you accomplish it? — Jeremy Thomas, Jul 13 '17 at 17:43
@JeremyThomas I haven't yet been able to refresh the grid without also resetting the positions of each tile unfortunately. I'm actually considering to update the position on the backend upon dragging them so they stay in that position after an update. — Mikael Kristensen, Jul 16 '17 at 11:29
I actually gave up on ever getting Packery to work without issues with Angular. The main issue was with updating the grid with new data from the backend - it just never seemed to work properly. Also using a grid that does not have direct support for Angular do not make a lot of sense since there will be too many issues with Angular integration. I therefore rewrote the grid using Dragula: https://github.com/valor-software/ng2-dragula Dragula just "worked" for my use case since it has much better control over columns and (fixed) positioning of items in general. — Mikael Kristensen, Sep 23 '17 at 15:06

Using Packery with Angular 2

1 Answers1