How can I help you?
Split panes in Angular Splitter component
4 Mar 202624 minutes to read
The Splitter component divides a container into resizable panes separated by draggable bars. This section covers pane orientation, layout configuration, separator customization, nested splitters, and dynamic pane manipulation.
Horizontal layout
By default, the Splitter renders in horizontal orientation. This layout divides the container into side-by-side panes separated by a vertical separator bar (a vertical line between horizontal panes).
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { SplitterModule } from '@syncfusion/ej2-angular-layouts'
import { Component } from '@angular/core';
@Component({
imports: [
FormsModule, SplitterModule
],
standalone: true,
selector: 'app-root',
template: `
<div id='container'>
<ejs-splitter #horizontal height='250px' width='600px'>
<e-panes>
<e-pane size='200px'>
<ng-template #content>
<div class="content">
<h3 class="h3">Grid </h3>
The ASP.NET DataGrid control, or DataTable is a feature-rich control used to display data in a tabular format.
</div>
</ng-template>
</e-pane>
<e-pane size='200px'>
<ng-template #content>
<div class="content">
<h3 class="h3">Schedule </h3>
The ASP.NET Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently
</div>
</ng-template>
</e-pane>
<e-pane size='200px'>
<ng-template #content>
<div class="content">
<h3 class="h3">Chart </h3>
ASP.NET charts, a well-crafted easy-to-use charting package, is used to add beautiful charts in web and mobile applications
</div>
</ng-template>
</e-pane>
</e-panes>
</ejs-splitter>
</div>`
})
export class AppComponent {
constructor() {
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Vertical layout
Setting the orientation property to Vertical to render the Splitter in vertical orientation, dividing the container into panes with a horizontal separator.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { SplitterModule } from '@syncfusion/ej2-angular-layouts'
import { Component } from '@angular/core';
@Component({
imports: [
FormsModule, SplitterModule
],
standalone: true,
selector: 'app-root',
template: `
<div id='container'>
<ejs-splitter #vertical orientation='Vertical' height='305px' width='600px'>
<e-panes>
<e-pane size='100px'>
<ng-template #content>
<div class="content">
<h3 class="h3">Grid </h3>
The ASP.NET DataGrid control, or DataTable is a feature-rich control used to display data in a tabular format.
</div>
</ng-template>
</e-pane>
<e-pane size='100px'>
<ng-template #content>
<div class="content">
<h3 class="h3">Schedule </h3>
The ASP.NET Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently
</div>
</ng-template>
</e-pane>
<e-pane size='100px'>
<ng-template #content>
<div class="content">
<h3 class="h3">Chart </h3>
ASP.NET charts, a well-crafted easy-to-use charting package, is used to add beautiful charts in web and mobile applications
</div>
</ng-template>
</e-pane>
</e-panes>
</ejs-splitter>
</div>`
})
export class AppComponent {
constructor() {
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Multiple panes
The Splitter supports any number of panes in both Horizontal and Vertical orientations.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { SplitterModule } from '@syncfusion/ej2-angular-layouts'
import { Component } from '@angular/core';
@Component({
imports: [
FormsModule, SplitterModule
],
standalone: true,
selector: 'app-root',
template: `
<div id='container'>
<ejs-splitter #multiple height='300px' width='600px'>
<e-panes>
<e-pane size='150px'>
<ng-template #content>
<div class="content">
<h3 class="h3">PARIS </h3>
Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
</div>
</ng-template>
</e-pane>
<e-pane size='150px'>
<ng-template #content>
<div class="content">
<h3 class="h3">CAMEMBERT </h3>
The village in the Orne département of Normandy where the famous French cheese is originated from.
</div>
</ng-template>
</e-pane>
<e-pane size='150px'>
<ng-template #content>
<div class="content">
<h3 class="h3">GRENOBLE </h3>
The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
</div>
</ng-template>
</e-pane>
<e-pane size='150px'>
<ng-template #content>
<div class="content">
<h3 class="h3">Australia </h3>
Australia is a country and continent surrounded by the Indian and Pacific oceans. Its major cities – Sydney, Brisbane, Melbourne, Perth, Adelaide – are coastal. Its capital, Canberra, is inland.
</div>
</ng-template>
</e-pane>
</e-panes>
</ejs-splitter>
</div>`
})
export class AppComponent {
constructor() {
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Separator
By default, the pane separator is rendered with a 1px width/height. The separator size can be customized using the separatorSize property.
- For horizontal orientation, this defines the separator’s width.
- For vertical orientation, this defines the separator’s height.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { SplitterModule } from '@syncfusion/ej2-angular-layouts'
import { Component } from '@angular/core';
@Component({
imports: [
FormsModule, SplitterModule
],
standalone: true,
selector: 'app-root',
template: `
<div id='container'>
<ejs-splitter #separator height='250px' separatorSize='5' width='600px'>
<e-panes>
<e-pane size='200px'>
<ng-template #content>
<div class="content">
<h3 class="h3">Grid </h3>
The ASP.NET DataGrid control, or DataTable is a feature-rich control used to display data in a tabular format.
</div>
</ng-template>
</e-pane>
<e-pane size='200px'>
<ng-template #content>
<div class="content">
<h3 class="h3">Schedule </h3>
The ASP.NET Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently
</div>
</ng-template>
</e-pane>
<e-pane size='200px'>
<ng-template #content>
<div class="content">
<h3 class="h3">Chart </h3>
ASP.NET charts, a well-crafted easy-to-use charting package, is used to add beautiful charts in web and mobile applications
</div>
</ng-template>
</e-pane>
</e-panes>
</ejs-splitter>
</div>`
})
export class AppComponent {
constructor() {
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Nested Splitter
Splitter components can be nested within panes to create complex multi-level layouts. The same <div> element used for both the parent pane and the nested Splitter.
Also you can render the nested splitter using direct child of the splitter pane. For this, nested splitter should have
100%width and height to match with the parent pane dimensions.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { SplitterModule } from '@syncfusion/ej2-angular-layouts'
import { Component, ViewChild } from '@angular/core';
import { SplitterComponent} from '@syncfusion/ej2-angular-layouts';
import { Splitter } from '@syncfusion/ej2-layouts';
@Component({
imports: [
FormsModule, SplitterModule
],
standalone: true,
selector: 'app-root',
template: `
<div id='container'>
<ejs-splitter #splitterInstance id="nested-splitter" (created)='onCreated()' height='320px' width='580px'>
<e-panes>
<e-pane size='200px'>
<ng-template #content>
<div class="content">
<h3 class="h3">PARIS </h3>
Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
</div>
</ng-template>
</e-pane>
<e-pane size= '200px'>
<ng-template #content>
<div class="content">
<h3 class="h3">CAMEMBERT </h3>
The village in the Orne département of Normandy where the famous French cheese is originated from.
</div>
</ng-template>
</e-pane>
<e-pane>
<ng-template #content>
<div id ='vertical_splitter' class="vertical_splitter">
<div>
<div class="content">
<h3 class="h3">GRENOBLE </h3>
The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
</div>
</div>
<div>
<div class="content">
<h3 class="h3">Australia </h3>
Australia is a country and continent surrounded by the Indian and Pacific oceans
</div>
</div>
</div>
</ng-template>
</e-pane>
</e-panes>
</ejs-splitter>
</div>`
})
export class AppComponent {
constructor() {
}
@ViewChild('splitterInstance') splitterObj?: SplitterComponent;
public onCreated () {
let splitterObj1 = new Splitter({
height: '310px',
paneSettings: [
{ size: '150px', min: '20%'},
{ size: '100px', min: '20%'}
],
orientation: 'Vertical'
});
splitterObj1.appendTo('#vertical_splitter');
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Add or remove pane
Panes can be added or removed programmatically using the addPane and removePane methods.
Add pane
Panes can be added dynamically in the splitter by passing pane properties along with index to the addPane method.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { SplitterModule } from '@syncfusion/ej2-angular-layouts'
import { Component, ViewChild } from '@angular/core';
import { SplitterComponent, PanePropertiesModel } from '@syncfusion/ej2-angular-layouts';
@Component({
imports: [
FormsModule, SplitterModule
],
standalone: true,
selector: 'app-root',
template: `
<div id='container'>
<ejs-splitter #add height='200px' width='600px'>
<e-panes>
<e-pane size='150px'>
<ng-template #content>
<div class="content">Pane 1</div>
</ng-template>
</e-pane>
<e-pane size='150px'>
<ng-template #content>
<div class="content">Pane 2</div>
</ng-template>
</e-pane>
</e-panes>
</ejs-splitter>
<div id='addButton'>
<button class='e-control e-btn' id='add' (click)='addPane()'>Add pane</button>
</div>
</div>`
})
export class AppComponent {
@ViewChild('add') splitterObj?: SplitterComponent;
constructor() {
}
public paneDetails: PanePropertiesModel = {
size: '190px',
content: 'New Pane',
min: '30px',
max: '250px',
}
addPane(): void {
if ((this.splitterObj as any).allPanes.length >= 1) {
this.splitterObj!.addPane(this.paneDetails, 1);
}
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Remove pane
Panes can be removed dynamically by passing the pane index to removePane method.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { SplitterModule } from '@syncfusion/ej2-angular-layouts'
import { Component, ViewChild } from '@angular/core';
import { SplitterComponent} from '@syncfusion/ej2-angular-layouts';
@Component({
imports: [
FormsModule, SplitterModule
],
standalone: true,
selector: 'app-root',
template: `
<div id='container'>
<ejs-splitter #remove height='200px' width='600px'>
<e-panes>
<e-pane size='200px'>
<ng-template #content>
<div class="content">Pane 1</div>
</ng-template>
</e-pane>
<e-pane size='200px'>
<ng-template #content>
<div class="content">Pane 2</div>
</ng-template>
</e-pane>
<e-pane size='200px'>
<ng-template #content>
<div class="content">Pane 3</div>
</ng-template>
</e-pane>
</e-panes>
</ejs-splitter>
<div id='removeButton'>
<button class='e-control e-btn' id='remove' (click)='removePane()'>Remove pane</button>
</div>
</div>`
})
export class AppComponent {
@ViewChild('remove') splitterObj?: SplitterComponent;
constructor() {
}
removePane(): void {
if ((this.splitterObj as any).allPanes.length > 1) {
this.splitterObj?.removePane(1);
}
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));