Responsive Draggable Resizable Grid System For Angular

Author:katoid
Views Total:542 views
Official Page:Go to website
Publish Date:May 11, 2021
License:MIT

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:

Responsive Draggable Resizable Grid System For Angular


You Might Be Interested In:

Add Comment