dockview-angular

Angular bindings for dockview, a zero dependency layout manager supporting tabs, groups, grids and splitviews

Please see the website: https://dockview.dev

Features

• Serialization / deserialization with full layout management
• Support for split-views, grid-views and 'dockable' views
• Themeable and customizable
• Tab and Group docking / Drag n' Drop
• Touch & mobile support
• Popout Windows
• Floating Groups
• Edge Groups
• Tab Groups
• Extensive API
• Supports Shadow DOMs
• High test coverage
• Documentation website with live examples
• Transparent builds and Code Analysis
• Security in mind - verified publishing and builds through GitHub Actions

Quick Start

Dockview-angular has a peer dependency on @angular/core >= 21.0.6. Install from npm:

npm install dockview-angular
Copy

Import the stylesheet in your styles.css or angular.json:

@import 'dockview-angular/dist/dockview.css';
Copy

Use the component in your Angular template:

import { Component } from '@angular/core';
import {
    DockviewAngularModule,
    DockviewReadyEvent,
    themeDark,
} from 'dockview-angular';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [DockviewAngularModule],
    template: `
        <div style="height: 400px">
            <dv-dockview
                [theme]="theme"
                [components]="components"
                (ready)="onReady($event)"
            ></dv-dockview>
        </div>
    `,
})
export class AppComponent {
    theme = themeDark;

    components = {
        myComponent: /* your panel component */,
    };

    onReady(event: DockviewReadyEvent) {
        event.api.addPanel({
            id: 'panel_1',
            component: 'myComponent',
        });
    }
}
Copy

See the documentation for full examples.

Want to verify our builds? Go here.