Split panes in Angular Splitter component
12 Sep 202524 minutes to read
This section explains the behavior of split panes in the Angular Splitter component.
Horizontal layout
By default, the Splitter renders in horizontal orientation, dividing the container into panes with a vertical 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 #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
Set 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
You can render multiple 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. You can customize the separator size 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 supports nested panes for complex layouts. You can use the same <div> element 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
You can add or remove panes programmatically using the addPane and removePane methods.
Add pane
You can add the panes 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
You can remove the split panes 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));