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
id number	ID to use when looking up the tab
Returns
WorkspaceTabRef<T> | undefined

open
Opens a workspace tab containing the given component
Parameters
component ComponentType<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
headerRef TemplateRef<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
data R	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.