Responsive Draggable Resizable Grid System For Angular

Description:

A responsive grid system with draggable and resizable grid items for Angular applications.

Specially designed to create highly customizable dashboards.

More Features:

• REDUX friendly (akita, ngrx, ngxs…)
• Customizable Drag & Resize handles.
• 3 modes of grid compaction: vertical, horizontal and free
• Add/Remove items
• High performance
• Supports touch devices
• Auto-scrolling while dragging

How to use it:

1. Install and import the module.

# NPM
$ npm i @katoid/angular-grid-layout

import { KtdGridModule } from '@katoid/angular-grid-layout';

@NgModule({
  imports: [KtdGridModule]
})

2. In your app template:

<ktd-grid [cols]="cols"
          [rowHeight]="rowHeight"
          [layout]="layout"
          (layoutUpdated)="onLayoutUpdated($event)">
  <ktd-grid-item *ngFor="let item of layout; trackBy:trackById" [id]="item.id">
    <!-- Your grid item content goes here -->
  </ktd-grid-item>
</ktd-grid>

import { ktdTrackById } from '@katoid/angular-grid-layout';
cols: number = 6;
rowHeight: number = 100;
layout: KtdGridLayout = [
    {id: '0', x: 0, y: 0, w: 3, h: 3},
    {id: '1', x: 3, y: 0, w: 3, h: 3},
    {id: '2', x: 0, y: 3, w: 3, h: 3},
    {id: '3', x: 3, y: 3, w: 3, h: 3},
];
trackById = ktdTrackById

Preview: