Grid item option to dynamically calculate and apply height of the item

Question

I've been working with Angular Gridster in the last two days to help create a "site builder" tool. One of the requirements of the site builder tool include allowing components in the workspace area to be moved around freely. I have managed to meet this requirement with Angular Gridster. However, I am having some difficulty updating the gridsterItems to fit a "dynamic height of grid cells".

I spent some time reading into the package, and it turns out this is because gridsterItems must fill exactly one or more grid cells, all columns must be the same width, and all rows must be the same height.

Imagine a scenario where you have two gridsterItems, one with content of size of 200px by 200px and one has content size of 181px by 181px. It is now impossible for these two gridsterItems to be adjacent to each other unless each row and column had a height/width of 1px (as 181 is a prime number and has no common denominators with 200).

The above scenario makes sense, but I am operating in a context where the width of a component would always be the same, and the height would vary. I do not need gridsterItems to be adjacent to each other. They would be above/underneath each other.

I am trying to implement the functionality to allow for this myself, but I have gotten stuck. My gridsterItems appear to conform to a single height only and are not "inheriting" the true size of the underlying component. Any idea how I can fix this?

My code is as follows:

import {ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation} from '@angular/core';
import {CompactType, GridsterConfig, GridsterItem, GridsterItemComponent, GridsterPush, GridType} from 'angular-gridster2';

@Component({
  selector: 'app-component',
  styleUrls: ['app.component.css'],
  templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit {
  options: GridsterConfig;
  dashboard: Array<GridsterItem>;
  itemToPush: GridsterItemComponent;

  ngOnInit() {
    this.options = {
      pushItems: true,
      maxCols: 1,
      margin: 10,
      maxRows: 2,
      displayGrid: 'none',
      scrollVertical: true,
      disableScrollHorizontal: true,
      compactType: 'compactUp&Left',
      mobileBreakpoint: 0,
      resizable: {
        enabled: false
      },
      draggable: {
        enabled: true
      }
    }
    this.dashboard = [{ x: 0, y: 0, rows: 1, cols: 1 },
      { x: 1, y: 0, rows: 1, cols: 1 }];
  }

  changedOptions() {
    if (this.options.api && this.options.api.optionsChanged) {
      this.options.api.optionsChanged();
    }
  }

  removeItem($event, item) {
    $event.preventDefault();
    $event.stopPropagation();
    this.dashboard.splice(this.dashboard.indexOf(item), 1);
  }

  addItem() {
    this.dashboard.push({x: 0, y: 0, cols: 1, rows: 1});
  }

  initItem(item: GridsterItem, itemComponent: GridsterItemComponent) {
    this.itemToPush = itemComponent;
  }

  pushItem() {
    const push = new GridsterPush(this.itemToPush); // init the service
    this.itemToPush.$item.rows += 4; // move/resize your item
    if (push.pushItems(push.fromNorth)) { // push items from a direction
      push.checkPushBack(); // check for items can restore to original position
      push.setPushedItems(); // save the items pushed
      this.itemToPush.setSize();
      this.itemToPush.checkItemChanges(this.itemToPush.$item, this.itemToPush.item);
    } else {
      this.itemToPush.$item.rows -= 4;
      push.restoreItems(); // restore to initial state the pushed items
    }
    push.destroy(); // destroy push instance
    // similar for GridsterPushResize and GridsterSwap
  }
}

I've included a Stackblitz here: https://stackblitz.com/edit/gridster-in-angular-di3ky5

Shareable preview: https://gridster-in-angular-di3ky5.stackblitz.io.