How can I help you?
Resizing panes in Angular Splitter component
4 Mar 202615 minutes to read
By default, pane resizing is enabled in the Angular Splitter component. A gripper element is added to the separator to make resizing intuitive and user-friendly.
The horizontal Splitter allows resizing in horizontal directions.
The vertical Splitter allows resizing in vertical directions.
During resizing, the adjacent panes automatically adjust their dimensions to accommodate the change.
Minimum and Maximum size constraints
Minimum and maximum size boundaries can be defined for each pane. Resizing is restricted within these boundaries to maintain layout integrity.
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 #validate height='200px' width='600'>
<e-panes>
<e-pane size='200px' min='20%' max='40%'>
<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' min='30%' max='60%'>
<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));Disabling pane resizing
Resizing can be disabled for individual panes by setting false to the resizable property within paneSettings.
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 #resize height='200px' width='600'>
<e-panes>
<e-pane size='200px' min='20%' max='40%' [resizable]='false'>
<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' min='30%' max='60%'>
<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));Note: Resizing is enabled only when the adjacent pane’s
resizableproperty is also set totrue.
Refreshing content during resize
Pane content can be refreshed dynamically during resizing by using the following events:
Customizing Resize-gripper and Cursor
The resize gripper icon and cursor can be customized using CSS to match application design requirements.
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 #resizegrip id='resizegrip' height='200px' width='600'>
<e-panes>
<e-pane size='200px' min='20%' max='40%'>
<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' min='30%' max='60%'>
<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='200px'>
<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-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));