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.

Angular Dock Manager Example

Usage

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

Follow the steps below to add the Dock Manager package to your Angular project and set it up in order to use the component.

First, install the igniteui-dockmanager package

npm install igniteui-dockmanager

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 {}

Next, one should call the defineCustomElements() function in the main.ts file:

import { AppModule } from './app/app.module';
import { defineCustomElements } from 'igniteui-dockmanager/loader';
import { enableProdMode } from '@angular/core';
import { environment } from '.environments/environment';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

if (environment.production) {
    enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.log(err));

defineCustomElements();

This is it, you are now ready to use the Dock Manager component in an Angular component template. To do so simply use its tag name:

<igc-dockmanager>
</igc-dockmanager>

For further information on the usage of the Dock Manager component, you can check out this topic.

For a more advanced example of the usage of the Dock Manager component with panes hosting various Ignite UI for Angular components, see this version of the data analysis sample.