Wondering what’s next for npm?Check out our public roadmap! »

    angular-gridster2
    TypeScript icon, indicating that this package has built-in type declarations

    11.1.5 • Public • Published

    angular-gridster2

    npm version dependencies Status devDependencies Status Node CI downloads Donate

    Angular implementation of angular-gridster Demo

    Requires Angular 11.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

    @ea20140129 @matpag (Mattia Pagini) @DerekJDev (Derek Johnson)

    Donate

    License

    The MIT License

    Copyright (c) 2021 Tiberiu Zuld

    Install

    npm i angular-gridster2

    DownloadsWeekly Downloads

    49,487

    Version

    11.1.5

    License

    MIT

    Unpacked Size

    1.61 MB

    Total Files

    54

    Last publish

    Collaborators

    • avatar
    • avatar