Ngx-Dockview-Layout

A flexible Angular library for creating dockable layouts using Dockview Core.

Installation

npm install ngx-dockview-layout

Usage

This library is designed for Non-Standalone Angular applications using NgModule approach.

Import the Module

Import the module in your app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxDockviewLayoutModule } from 'ngx-dockview-layout';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NgxDockviewLayoutModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Use the Component

Use the component in your template:

import { Component } from '@angular/core';
import { YourComponent } from './your-component';

@Component({
  selector: 'app-root',
  template: `
    <lib-ngx-dockview-layout
      [defaultLayout]="layout"
      [panels]="panels"
      [theme]="theme">
    </lib-ngx-dockview-layout>
  `
})
export class AppComponent {
  layout = {
    // Your layout configuration
  };
  
  panels = [
    {
      id: 'panel1',
      title: 'Panel 1',
      componentName: YourComponent
    }
  ];
  
  theme = 'dark'; // or 'light'
}

API Reference

NgxDockviewLayoutComponent

Inputs

• defaultLayout: Layout configuration object
• panels: Array of panel definitions
• theme: Optional theme ('dark' | 'light')

Panel Definition

interface Panel {
  id: string;
  title: string;
  componentName?: Type<any>;
  tabComponent?: Type<any>;
  params?: any;
  position?: any;
}

NgxDockviewLayoutService

Service for registering components dynamically:

import { NgxDockviewLayoutService } from 'ngx-dockview-layout';

constructor(private dockviewService: NgxDockviewLayoutService) {
  this.dockviewService.register('my-component', MyComponent);
}

Examples

Basic Layout

const layout = {
  dockbox: {
    mode: 'horizontal',
    children: [
      {
        mode: 'vertical',
        children: [
          {
            tabs: [
              {
                id: 'panel1',
                title: 'Panel 1'
              }
            ]
          }
        ]
      }
    ]
  }
};

With Custom Components

const panels = [
  {
    id: 'editor',
    title: 'Code Editor',
    componentName: CodeEditorComponent
  },
  {
    id: 'preview',
    title: 'Preview',
    componentName: PreviewComponent
  }
];

Browser Support

This library requires a modern browser with support for:

• ES2015+ features
• CSS Grid
• Flexbox

License

MIT