Javascript angular2gridster getting it to work

So I have installed the library in a new angular-cli project.

Next I have added this to the app.component.html:

<gridster [options]="gridsterOptions" [draggableOptions]="{ handlerClass: 'panel-heading' }">

  <gridster-item *ngFor="let widget of widgets"
                 [(x)]="widget.x" [(y)]="widget.y" [(w)]="widget.w" [(h)]="widget.h">
    <!--some content-->
  </gridster-item>

</gridster>

and Finally I this is my app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';

  widgets: Array<any> = [];
  gridsterOptions = {
    lanes: 5,
    direction: 'vertical',
    dragAndDrop: true,
    resizable: true,
    useCSSTransforms: true,
  };
}

Finally I run my project and get no errors in the console log but just a blank page on the view.

I'm I forgetting something, why isn't it working?

Solution

The gridster component doesn't set the height property of it's container element (in your case, it would be <body> I presume). If you don't mind scrolling through the grid, you can simply place it in a <div> with 100% height. However, if you don't want scrolling in the grid, then you should consider doing something like this:

<div #gridsterContainer [style.height.px]="gridHeight" (window:resize)="onResize(gridsterContainer.getBoundingClientRect())">
    <gridster [options]="options">
        <gridster-item [item]="item" *ngFor="let widget of widgets">
            <!-- your widget here -->
        </gridster-item>
    </gridster>
</div>

And the onResize method should compute the parent's height based on how many widgets you have (you need to come up with a formula for that) and then set the gridHeight property to that value.