ngx-workspace v0.2.5

ngx-workspace

Workspace is a whiteboard for users to customise the location of each widget/application on the page, it follows the rules of 12 grid net design. The whiteboard has been split up to 12 squares in a row, the widgets/applications initialise a normalised size to draw them on the whiteboard. All the widgets/applications on the board is draggable, and they all align to the grid net.

Demo

Here

How to use

app.component.html

<ngx-workboard [wsWidgets]="widgets" [wsResponsive]="responsive" [wsResponsiveScale]="responsiveScale" [wsEditable]="editable"></ngx-workboard>

app.component.ts

import { Component } from '@angular/core';
import { WidgetProfile } from 'ngx-workspace';
import { WidgetAComponent } from './widget-a/widget-a.component';
import { WidgetBComponent } from './widget-b/widget-b.component';
import { WidgetCComponent } from './widget-c/widget-c.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  public widgets: Array<WidgetProfile> = [
    {
      name: 'widget-a',
      unitHeight: 1,
      unitWidth: 2,
      offsetLeftUnit: 0,
      offsetTopUnit: 1,
      component: WidgetAComponent
    },
    {
      name: 'widget-b',
      unitHeight: 2,
      unitWidth: 1,
      offsetLeftUnit: 2,
      offsetTopUnit: 0,
      component: WidgetBComponent
    },
    {
      name: 'widget-c',
      unitHeight: 3,
      unitWidth: 4,
      offsetLeftUnit: 0,
      offsetTopUnit: 2,
      component: WidgetCComponent
    },
  ];
  public editable = false;
  public responsiveScale = 768;
  public responsive = true;
}

You can try it in demo page

Documentation

input of ngx-workboard

WidgetProfile