Split View

A split view component for Angular applications that allows users to resize the panes within it.

Table of Contents

1. Installation
2. Usage
3. Examples
4. Documentation
   • SplitViewComponent
   • SplitPaneDirective
   • SplitViewGutterDirective
5. Thanks

Installation

Install using npm in the usual way

$ npm install ngx-split-view --save

Usage

1. Once you have installed ngx-split-view, you can import it in your AppModule:

// a. Import SplitViewModule
import { SplitViewModule } from 'ngx-split-view';

@NgModule({
  // ....

  imports: [
    // b. Add SplitViewModule to your NgModule imports
    SplitViewModule
  ]
})
export class AppModule { }

2. Start using the split-view component in your templates

<split-view>
  <div splitPane [splitRatio]="2">Left pane (2/3rds size)</div>
  <div splitPane [splitRatio]="1">Right pane (1/3rd size)</div>
</split-view>

Important Note: Always place the square brackets around the splitRatio attribute.

Examples

Minimum size pane

<split-view>
  <div splitPane [splitRatio]="2">Left pane (2/3rds size)</div>
  <div splitPane [splitRatio]="1" minSize="300">Right pane (1/3rd size)</div>
</split-view>

Horizontal split

<split-view direction="horizontal">
  <div splitPane [splitRatio]="2">Left pane (2/3rds size)</div>
  <div splitPane [splitRatio]="1">Right pane (1/3rd size)</div>
</split-view>

Custom gutter template

<split-view>
  <div splitPane [splitRatio]="2">Left pane (2/3rds size)</div>
  <div splitPane [splitRatio]="1">Right pane (1/3rd size)</div>
  <div *gutterTemplate style="background: green"></div>
</split-view>

Documentation

SplitViewComponent

The container for split view panes. It will render all content with SplitPaneDirective, ignoring all other content.

Selector: split-view

Properties

Name	Description	Default
@Input() expandToMin: boolean	Grow initial sizes to minSize on each pane	false
@Input() gutterSize: number	Gutter size in pixels	10
@Input() gutterAlign: GutterAlignment	Gutter alignment between elements	center
@Input() snapOffset: number	Snap to minimum size offset in pixels	30
@Input() dragInterval: number	Number of pixels to drag	1
@Input() direction: SplitDirection	Direction to split: horizontal or vertical	horizontal

Events

Name	Description
@Output() dragging: EventEmitter<DragEvent>	Called while dragging
@Output() dragStart: EventEmitter<DragEvent>	Called on drag start
@Output() dragEnd: EventEmitter<DragEvent>	Called on drag end

Notes

These options map one-to-one with those exposed by split.js. Please see the documentation for more information

SplitPaneDirective

Pane selection directive. Allows specifying the ratio and minimum size of panes within the split-view. Content without this directive will not be displayed.

Selector: [splitPane]

Properties

Name	Description	Default
@Input() splitRatio: number	The size of the pane as a ratio	1
@Input() minSize: number	Minimum sizes pane in pixels	100

SplitViewGutterDirective

The gutter definition for the split-view. Captures the template gutters.

Selector: [gutterTemplate]

Thanks

This component uses the excellent split.js library by Nathan Cahill to do the heavy lifting.