How to create Draggable Grid Blocks using angular-gridster2

To create Draggable Grid Blocks using angular-gridster2 first you need to Install the angular-gridster2 library by running

npm install angular-gridster2 in your project’s root directory.

You also need to import GridsterModule inside the angular module.

import { GridsterModule } from 'angular-gridster2';

  imports: [
export class YourModule { }

In your component’s template, add the gridster element and define the grid items using the gridsterItem element:

<gridster [options]="options">
  <gridster-item [item]="item" *ngFor="let item of items"></gridster-item>

In your component’s class, define the options object and the items array:

export class YourComponent {
  options: GridsterConfig;
  items: Array<GridsterItem>;

  ngOnInit() {
    this.options = {
      draggable: {
        enabled: true

    this.items = [
      {cols: 2, rows: 1, y: 0, x: 0},
      {cols: 2, rows: 2, y: 0, x: 2},

With above steps, you have created the draggable grid blocks using angular-gridster2 library.

You can also customize the other options like maxCols, minCols, maxRows, minRows for the grid and dragHandles for the grid items as per your requirements.

In addition to the steps I previously provided, here are a few more things you can do to customize your draggable grid blocks using angular-gridster2:

  1. Customize the grid size: You can adjust the size of the grid by setting the gridType option to either “fixed” or “scrollVertical“, and then adjusting the fixedColWidth and fixedRowHeight options.
  2. Add custom styles to the grid and grid items: You can add custom CSS styles to the grid and grid items by setting the gridsterItemClass and gridsterClass options.
  3. Respond to grid events: The angular-gridster2 library emits a number of events, such as change, resize, init, destroy, etc. You can listen to these events and respond to them in your component’s class.
  4. Add a resize handle: You can add a resize handle to your grid items by setting the resizable option to true, and then adjusting the handles option to specify which edges of the grid item the handle should appear on.
  5. Add a swap item: You can add a swap item to your grid by setting the swap option to true, which allows you to swap the positions of grid items by dragging them over one another.
  6. You can also customize the other options like maxCols, minCols, maxRows, minRows for the grid and dragHandles for the grid items as per your requirements.

It’s worth noting that these are just a few examples of what you can do with the angular-gridster2 library, and there are many more options and customization possibilities available to you. I recommend looking at the library’s documentation for a full list of options and examples of how to use them.

Related Posts

angular vs react-min

What is the difference between Angular & React JS, Which one you should choose?

Angular & React JS both are use for Frontend Development, To make Single page applications or Web Apps. Here is a quick difference between both of them….

angular icon

What is Angular Framework? Why we use Angular and What are the Advantages and Disadvantages?

Hi Everyone, In this blog we will discuss about Angular Framework and this is going to be a brief blog about Angular and its pros and cons….

angular icon

Why toPromise is depricated and Explain other options like firstValueFrom and lastValueFrom methods

toPromise method is a method form Rxjs library, It is used to convert an observable to a promise. The toPromise method subscribe to observable and retrun the…

angular icon

How to use RxJS observables in Angular? How to subscribe services with reactive programming

RxJS is a library for reactive programming, RxJS stands for reactive extension for JavaScript. It helps to handle asynchronous request in a easier way using observables. You…

angular icon

How angular app works? what happen in background when angular application starts.

Let’s understand how an angular application works from core, what happen when it starts. In index.html file there is a <app-root> custom html code, this app-root is…

angular icon

How to organize your angular application using modules

Angular Basics Its a javascirpt framework Its different from angular js Used to build powerful frontend applications. Its used for rapid application development and code generation. Some…

Leave a Reply

Your email address will not be published. Required fields are marked *