@lumico/angular-gridster2 v8.1.2

angular-gridster2

Angular implementation of angular-gridster Demo

This is an Ivy Compatible fork which exists only temporarily until the main package supports Ivy

Requires Angular 8.x

For other Angular versions check the other branches.

Install

npm install @lumico/angular-gridster2 --save

Should work out of the box with webpack, respectively angular-cli.

import { GridsterModule } from '@lumico/angular-gridster2';

@NgModule({
  imports: [ GridsterModule ],
  ...
})

Browser support

What Angular supports here

How to use

<gridster [options]="options">
  <gridster-item [item]="item" *ngFor="let item of dashboard">
    <!-- your content here -->
  </gridster-item>
</gridster>

Initialize a simple dashboard:

   import { GridsterConfig, GridsterItem }  from 'angular-gridster2';
   options: GridsterConfig;
   dashboard: Array<GridsterItem>;

   static itemChange(item, itemComponent) {
     console.info('itemChanged', item, itemComponent);
   }
 
   static itemResize(item, itemComponent) {
     console.info('itemResized', item, itemComponent);
   }
 
   ngOnInit() {
     this.options = {
       itemChangeCallback: AppComponent.itemChange,
       itemResizeCallback: AppComponent.itemResize,
     };
 
     this.dashboard = [
       {cols: 2, rows: 1, y: 0, x: 0},
       {cols: 2, rows: 2, y: 0, x: 2}
     ];
   }
 
   changedOptions() {
     this.options.api.optionsChanged();
   }
 
   removeItem(item) {
     this.dashboard.splice(this.dashboard.indexOf(item), 1);
   }
 
   addItem() {
     this.dashboard.push({});
   }

Note: The gridster will take all the available space from the parent. It will not size depending on content. The parent of the component needs to have a size.

Having iFrame in widgets content

iFrames can interfere with drag/resize of widgets. For a workaround please read this issue #233

Interact with content without dragging

Option 1 (without text selection):

<gridster-item>
   <div (mousedown)="$event.stopPropagation()" (touchstart)="$event.stopPropagation()">
     Some content to click without dragging the widget
   </div>
   <div class="item-buttons">
     <button md-icon-button md-raised-button class="drag-handler">
         <md-icon>open_with</md-icon>
     </button>
     <button md-icon-button md-raised-button class="remove-button" (click)="removeItem($event, item)"
             (touchstart)="removeItem($event, item)" mdTooltip="Remove">
       <md-icon>clear</md-icon>
     </button>
   </div>
</gridster-item>

Option 2 (with text selection):

<gridster-item>
  <div class="gridster-item-content">
      Some content to select and click without dragging the widget
  </div>
  <div class="item-buttons">
    <button md-icon-button md-raised-button class="drag-handler">
      <md-icon>open_with</md-icon>
    </button>
    <button md-icon-button md-raised-button class="remove-button" (click)="removeItem($event, item)"
            (touchstart)="removeItem($event, item)" mdTooltip="Remove">
      <md-icon>clear</md-icon>
    </button>
  </div>
</gridster-item>

Contributors here

Supporters

@matpag (Mattia Pagini) Derek

License

The MIT License

Copyright (c) 2019 Tiberiu Zuld Copyrith (c) 2019 Lumi Media