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

| Name | Description | |---|---| | slide: BehaviorSubject<'in' | 'out'> | Slide in and out the workspace | | afterAllClosed: Observable | Stream that emits when all open tabs have finished closing.| | tabCount: Observable | An Observable that will emit on Tab count changes | | onTabClosed: Subject<WorkspaceTabRef> | An observable which will emit if a tab is closed | | afterOpened: Subject<WorkspaceTabRef> | Stream that emits when a tab has been opened. | | openWorkspaces: WorkspaceTabRef[] | Keeps track of currently-open workspace tabs | | emitErrors: Subject | Stream that emits all tab errors |

Methods

| closeAll | |---| | Close all of the currently-open tabs |

| getWorkspaceById || |---|---| | Finds an open tab by its id || | Parameters || | idnumber | ID to use when looking up the tab| | Returns || | WorkspaceTabRef<T> | undefined ||

| open || |---|---| | Opens a workspace tab containing the given component || | Parameters || | componentComponentType<T> | Type of the component to load into the tab | | config?IWorkspaceTabConfig<D> | Extra Configuration Options | | Returns || | WorkspaceTabRef<T, R> ||

| attachHeader || |---|---| | Attach the given component or Template as the workspace header || | Parameters || | headerRefTemplateRef<any> | ComponentType<any> | Type of the component or Template to load as the header |

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

| Name | Description | |---|---| | referenceId: number || | componentRef: ComponentRef<T> | reference to component opened in tab |

Methods

| close || |---|---| | Close current workspace tab || | Parameters || | dataR | Data to passes down to parent component |

| minimize | |---| | Minimize the workspace |

| onTabVisit | |---| | Gets an observable that is notified when the tab is been visited | | Returns | | Observable<T> |

| onTabLeave | |---| | Gets an observable that is notified when the tab is been left | | Returns | | Observable<void> |

| onClose | |---| | Gets an observable that is notified when the tab is been closed | | Returns | | Observable<R | undefined> |

| onOpen | |---| | Gets an observable that is notified when the tab is been opened | | Returns | | Observable<void> |

Interfaces

IWorkspaceTabConfig

Configuration for opening a workspace tab with the NgsWorkspace service

Properties

| Name | Description | |---|---| | title?: string | Title of the Workspace tab | | data?: D | null | Data being injected into the child component.| | disableClose?: boolean | Whether the user can click on the tab close button to close the modal |

IWorkspaceConfig

Configuration for workspace module root function

Properties

| Name | Description | |---|---| | title?: string | Title of the Workspace tab | | disableClose?: boolean | Whether the user can click on the tab close button to close the modal | | minimizeOnNavigation?: boolean | Trigger the workspace to minimize on route change | | maxWidth?: number | string | Set a maximum workspace width | | minWidth?: number | string | Set a minimum workspace width | | width?: number | string | Set the initial workspace width | | maxTabCount?: number | Limit the tab Count. Default to -1 (inifinite) | | placeholderComponent?: ComponentType | Component to be rendered as empty workspace UI | | direction?: 'RTL' | 'LTR' | Direction in which the workspace is expanded | | showSideBtn?: boolean | Set side button visibility | | classes?: StyleType | object of custom class names to customize workspace | | handleTabClose?: boolean | Disable workspace tab close button | | tabChangeAnimation?: boolean | Visibility of tab change animation | | animationDuration?: number | Duration of workspace animation in ms | | animationTiming?: WorkspaceAnimationTimingType | Workspace animation Timing Function |

WorkspaceErrorModel

Error Model Type the Workspace emits errors

Properties

| Name | Description | |---|---| | ref: WorkspaceTabRef<any> | Reference the Workspace tab | | errorV2: WorkspaceErrorTypesV2 | Error Type enum.| | message?: string | The Error message for the error, if any. | | content?: string | The Error content, if any. |

StyleType

Object of custom class names to customize workspace

Properties

| Name | Description | |---|---| | container?: string[] | Array of custom class names attached to workspace container | | body?: string[] | Array of custom class names attached to workspace tab body | | tabLabel?: string[] | Array of custom class names attached to workspace tab label | | tabContainer?: string[] | Array of custom class names attached to workspace tab container |

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.