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/
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Gaurav Arora
Gaurav is an experienced UI developer with experience and capabilities to build compelling UI's for Web and Mobile Applications.