angular-gridster2

Angular gridster 2

Github星跟蹤圖

angular-gridster2

npm version
dependencies Status
devDependencies Status
Node CI
downloads
Donate

Angular implementation of angular-gridster Demo

Requires Angular 8.x

For other Angular versions check the other branches.

Install

npm install angular-gridster2 --save

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

import { GridsterModule } from '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

Donate

License

The MIT License

Copyright (c) 2019 Tiberiu Zuld

主要指標

概覽
名稱與所有者tiberiuzuld/angular-gridster2
主編程語言TypeScript
編程語言CSS (語言數: 6)
平台
許可證MIT License
所有者活动
創建於2016-01-13 10:43:19
推送於2025-08-11 10:30:08
最后一次提交2025-08-11 13:28:45
發布數267
最新版本名稱v20.2.2 (發布於 )
第一版名稱v0.0.1 (發布於 )
用户参与
星數1.3k
關注者數40
派生數385
提交數691
已啟用問題?
問題數813
打開的問題數328
拉請求數96
打開的拉請求數2
關閉的拉請求數32
项目设置
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?