ngs-workspace v0.2.0

Angular Smart Workspace

This Library introduces an Intelligent way to hold your components dynamically in a tabular format in a modern side panel.

Below documentation is a 90% plagiarisation of Angular Mat Dialog documentation.

Overview

The NgsWorkspace service can be used to open workspaces with Material Design styling and animations into a modern looking side panel.

Demo Link

The NgsWorkspaceModule should be added to the app module with optional default configuration (IWorkspaceConfig).

@NgModule({
  imports: [
    ...
    NgsWorkspaceModule.forRoot({
      placeholderComponent: NoTabComponent
    }),
    ...
  ],
})
export class AppModule { }

A workspace is opened by calling the open method with a component to be loaded and an optional config object (IWorkspaceTabConfig). The open method will return an instance of NgsWorkspaceTabRef:

let workspaceRef = workspace.open(UserProfileComponent, {
  title: 'User Profile'
});

The NgsWorkspaceTabRef provides a handle on the opened workspace tab. It can be used to close the workspace tab and to receive notification when the workspace tab has been closed.

workspaceRef.afterClosed().subscribe(result => {
  console.log(`Workspace result: ${result}`); // Cool!
});

workspaceRef.close('Cool!');

Components created via NgsWorkspace can inject NgsWorkspaceTabRef and use it to close the workspace in which they are contained. When closing, an optional result value can be provided. This result value is forwarded as the result of the afterClosed promise.

@Component({/* ... */})
export class YourWorkspaceTab {
  constructor(public workspaceRef: NgsWorkspaceTabRef<YourWorkspaceTab>) { }

  closeWorkspaceTab() {
    this.workspaceRef.close('Cool!');
  }
}

Sharing data with the Workspace Tab component.

If you want to share data with your workspace tab, you can use the data option to pass information to the workspace tab component.

let workspaceRef = workspace.open(YourWorkspaceTab, {
  data: { name: 'austin' },
});

To access the data in your workspace tab component, you have to use the WORKSPACE_DATA injection token:

import {Component, Inject} from '@angular/core';
import {WORKSPACE_DATA} from 'ngs-workspace';

@Component({
  selector: 'your-workspace',
  template: 'passed in {{ data.name }}',
})
export class YourWorkspaceTab {
  constructor(@Inject(WORKSPACE_DATA) public data: {name: string}) { }
}

Handling Errors Globally

this.workspace.emitErrors.subscribe((err: WorkspaceErrorModel) => {
  if (err.message) {
    this.snackBar.open(err.message);
  }
});

Adding Custom header to workspace

Add this to any html template in your project

<div *ngsWorkspaceHeader class="header">
  Workspace
  <div class="close-btn" ngsWorkspaceClose>
    <mat-icon>login</mat-icon>
  </div>
</div>

or attach the template Reference or Component to workspace service to dynamically set the header

this.workspace.attachHeader(header);

API reference

import {NgsWorkspaceModule} from 'ngs-workspace';

Services

NgsWorkspace

Service to open NgsWorkspace Tab.

Properties

Methods

Directives

WorkspaceClose

Button that will close the current workspace tab

Selector: [ngsWorkspaceClose]

WorkspaceHeader

A structural directive which will take it's content and add it to the workspace header.

Selector: [ngsWorkspaceHeader]

Classes

WorkspaceTabRef

Reference to a tab opened via NgsWorkspace Service.

Properties

Methods

Interfaces

IWorkspaceTabConfig

Configuration for opening a workspace tab with the NgsWorkspace service

Properties

IWorkspaceConfig

Configuration for workspace module root function

Properties

WorkspaceErrorModel

Error Model Type the Workspace emits errors

Properties

StyleType

Object of custom class names to customize workspace

Properties

Type aliases

WorkspaceErrorTypesV2

The enum type of error that is thrown.

enum WorkspaceErrorTypesV2 {
  SIMILAR_TAB_ERROR,
  MAX_TAB_COUNT_EXCEEDED_ERROR,
  CONSOLE_ERROR
}

WorkspaceAnimationTimingType

Animation timing function types

export type WorkspaceAnimationTimingType = 'ease'
    | 'linear'
    | 'ease-in'
    | 'ease-out'
    | 'ease-in-out';

Constants

WORKSPACE_DATA

Injection token that can be used to access the data that was passed in to a tab.

const WORKSPACE_DATA: InjectionToken<string>

Versions

v0.2.0

This Update include breaking changes, new features and some bug fixes

• The requirement to add the workspace component to a base component is now removed
• The workspace component is not exposed
• The method to add the workspace header has been altered
• New API exposed from Workspace service to attach header dynamically
• Exposed a Configuration to attach a custom class to workspace container "workspaceContainerClass"
• Updated Customizable classes api to contain Container, Body, TabLabel and TabContainer
• Exposed an external tab close handle
• Exposed tab count observable
• New tab change animation disable api
• Workspace animation customizability added

v0.1.2

This Update include new features

• Added the ability to change the direction of the workspace(RTL or LTR)
• Added new Workspace header which can be added by a directive(ngsWorkspaceHeader)
• Added new Workspace Close directive(ngsWorkspaceClose)
• Added the ability to hide the side button

v0.1.1

This Update include new feature and APIs

• Added New APIs to service
  • afterAllClosed
  • afterOpen
  • openWorkspaces
  • closeAll method
  • getWorkspaceById method
• Global Error Handling added

v0.1.0

This update include several bug and performance enhancement.

• Added a Workspace Container CSS Class
• Now the component reference is exposed from WorkspaceTabRef
• Default Error Enum is Deprecated
• New Error Enum added with Better description

Collaboration

Please create a Github Issues to inform any issues and suggestions, also you can fix any code issues you find and create a pull request to integrate.