Introduction to Angular Gridster2

Posted By : Gaurav Arora | 31-Jul-2018

Hi Guys, If you are looking for a Drag and Drop widget like plugin, then your search is over. You can simply use Angular Gridster 2. A plugin that provides Drag and Drop, Resize and Remove widget functionality.

It’s the easiest to plugin that provides the above functionalities.

Let’s Start by installing the Angular Gridster 2. In your command line install gridster with

      npm install angular-gridster2 --save
    

Once gridster is installed, then in you app module import Gridster Module

    import { GridsterModule } from 'angular-gridster2';
    

Now we have to define the Gridster in our HTML file.

    
      
 

Now we have to define gridster options in our component file, also we have to create an array for the items, with the help of which our items will generate.

    import { GridsterConfig, GridsterItem, GridType, CompactType } from 'angular-gridster2'; 
    
    export class AppComponent{
      options: GridsterConfig;
      dashboard: Array;

      ngOnInit() {
        this.options = {
          gridType: GridType.ScrollVertical,
          compactType: CompactType.None,
          minCols: 30,
          maxCols: 30,
          minRows: 1,
          minItemRows: 5,
          maxItemRows: 50,
          defaultItemCols: 1,
          defaultItemRows: 1,
          draggable: {
            enabled: true,
          },
          resizable: {
            enabled: true,
          },
        };
    
        this.dashboard = [
          { cols: 15, rows: 10, y: 0, x: 0 },
          { cols: 15, rows: 10, y: 0, x: 2 },
          { cols: 15, rows: 10, y: 10, x: 0 },
          { cols: 15, rows: 10, y: 16, x: 16 },
          { cols: 15, rows: 10, y: 0, x: 0 }
        ];
      }
    }
    

These are some basics properties that we have to define to create gridster.

In our data array, cols and rows works as width and height of the Gridster Item, and x and y are the coordinates where items will be placed on the grid.

In the example above, it will throw some warnings in the console, as it can’t overlap the defined coordinates. So, we can fix them by defining the fixed coordinates, else it will adjust automatically. In that case our defined order will not work.

So, these are the some basics with the help of which widgets like structure can be created.

For complete reference on the Gridster API : https://tiberiuzuld.github.io/angular-gridster2/

About Author

Author Image
Gaurav Arora

Gaurav is an experienced UI developer with experience and capabilities to build compelling UI's for Web and Mobile Applications.

Request for Proposal

Name is required

Comment is required

Sending message..