How To Use Dock Manager To Manage Multiple Draggable Windows In Angular Application

Introduction

Dock Manager is very useful for applications that want to allow the end-user to customize screen layout through pinning, resizing, moving, and hiding panes in the view. In many real-time applications (such as financial applications) we have to manage multiple sections at the same place. To achieve this, I recommend that you try Ignite UI Dock Manager.

Ignite UI Dock Manager

The Ignite UI Dock Manager component provides means to manage the layout of your application through panes, allowing your end-users to customize it further by pinning, resizing, moving, and hiding panes.

The Dock Manager is a standard web component and as such, can be used in an Angular application.

How To Use Dock Manager To Manage Multiple Draggable Windows In Angular Application

Let’s make it! Follow the steps below to use the Dock Manager.

Step 1

Create a new angular application or use any existing angular application with a component where you want to add this Dock Manager.

Here, I have a sample test application with the default angular application template. I have created a new Home Component in this application to use this Dock Manager Layout.

Step 2

Install Ignite UI Dock Manager from NPM using the following command:

npm install igniteui-dockmanager

Step 3

Import the CUSTOM_ELEMENTS_SCHEMA from ‘@angular/core’ and then, include the CUSTOM_ELEMENTS_SCHEMA schema in the AppModule.

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@NgModule({
...
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

Step 4

To register this, we need to call the defineCustomElements() function in the main.ts file. Before doing that, don’t forget to import this defineCustomElements() function from "igniteui-dockmanager/loader".

Step 5

Now, we are good to go for this Dock Manager to use directly in our view file Home.component.html with its tag name, as,

<igc-dockmanager>
</igc-dockmanager>

Now, to manage this we can have to bind its property [layout] with an object from your component that contains the layout source and the definition. I have mapped the property with a variable for now named LayoutSource, which is now available for now but in the next step, we will create a variable with this name and will assign all the child windows and tabs for this.

Step 6

First, in the Home component (home.component.ts) file import IgcDockManagerLayout, IgcDockManagerPaneType, IgcSplitPaneOrientation from "igniteui-dockmanager" to use Dock manager type references and Enums.

Declare an object variable with the type of IgcDockManagerLayoutand use the same name that you used with the [layout] property of Dock Manager in the last step.

public LayoutSource:IgcDockManagerLayout;

Now, we have to initialize this object with the number of pans we want in this Dock Manager to be displayed. IgcDockManagerLayouthas two properties,

rootPane
This is a required property and will contain one object as a root container typedIgcSplitPane.
floatingPanes
This is an optional property, and will contain a collection with the type of IgcSplitPane[].

So, for the first root pane, we can define it like this:

Here in this code, you can see we have assigned both properties of Dock Manager rootPane and floatingPanes. This will not work for sure because we have not added any child for this rootPane or floatingPanes.

To add Child Panes in root or floating panes, we can create some content panes and set some required properties, like this:

public LayoutSource:IgcDockManagerLayout={
rootPane:{
type:IgcDockManagerPaneType.splitPane,
orientation:IgcSplitPaneOrientation.horizontal,
panes:[
{
type:IgcDockManagerPaneType.contentPane,
contentId:"content1",
header:"Content Type 1"
}
]
},
floatingPanes:[
{
type:IgcDockManagerPaneType.splitPane,
orientation:IgcSplitPaneOrientation.horizontal,
floatingHeight:200,
floatingWidth:350,
floatingLocation:{x:300,y:100},
panes:[
{
type:IgcDockManagerPaneType.contentPane,
contentId:"content2",
header:"This is my Floating Pane"
}
]
}
]
};

To display the content for the panes body, the Dock Manager uses slots. This slot attribute of the content element should match with the “contentId” that you used in the component class to declare child panes, also set the width and height of the content elements to 100% for predictable response when the end-user is resizing panes.

<igc-dockmanager [layout]=LayoutSource style="height: 600px;">
<div slot="content1" height="100%" width="100%">
This is my root Pane :)
</div>
<div slot="content2" height="100%" width="100%">
This is my first Floating Pane :)
</div>
</igc-dockmanager>

Now run your app again to check the update Dock Manager. So, here is my new Dock Manager Panes with the content that we wanted to place with the respected slot, matched with the contentId in the layout Source.

The Dock Manager may have several pane types:

Content pane
Split pane
Tab group pane
Document host

Also, the end-user can perform the following actions to customize the layout at runtime:

Pin/unpin a pane
Resize a pane
Close a pane
Drag a pane to make it float
Move a floating pane
Dock a floating pane