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';

@NgModule({
  imports: [
    GridsterModule
  ],
  ...
})
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>
</gridster>

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.