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

In app module, import NgxWorkspaceModule into the project. Components imported into workspace should be declared in entryComponents.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxWorkspaceModule } from 'ngx-workspace';

import { AppComponent } from './app.component';
import { WidgetAComponent } from './widget-a/widget-a.component';
import { WidgetBComponent } from './widget-b/widget-b.component';
import { WidgetCComponent } from './widget-c/widget-c.component';

@NgModule({
  declarations: [
    AppComponent,
    WidgetAComponent,
    WidgetBComponent,
    WidgetCComponent
  ],
  imports: [
    BrowserModule
    NgxWorkspaceModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [
    WidgetAComponent,
    WidgetBComponent,
    WidgetCComponent
  ]
})
export class AppModule { }

app.component.html

<ws-workboard [wsWidgets]="widgets" [wsResponsive]="responsive" [wsResponsiveScale]="responsiveScale" [wsEditable]="editable"></ws-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

| parameter | optional | type | description | | ----------------- | -------- | ---- | ----------- | | wsWidgets | required | WidgetProfile[] | Import draggable components into workspace | | wsResponsive | optional(default: true) | boolean | Enable responsive mode of workspace | | wsResponsiveScale | optional (default: 0) | number | Disable responsive mode when screen width is less than 'wsResponsiveScale' | | wsEditable | required (default: true) | boolean | Enable/disable workspace edit mode |

WidgetProfile

| parameter | optional | type | description | | ----------------- | -------- | ---- | ----------- | | name | required | string | Component name, must be unique | | unitHeight | required | number | Component unit height, from 1 to 12 | | unitWidth | required | number | Component unit width, from 1 to 12 | | offsetHeight | required | number | Component position offset unit of height, from 1 to 12 | | unitWidth | required | number | Component position offset unit of width, from 1 to 12 | | component | required | Angular Component | Component loaded in the widget |