Expand and collapse panes in Angular Splitter Component
12 Sep 202510 minutes to read
Collapsible panes
The Angular Splitter component supports built-in expand and collapse functionality for its panes. By default, this behavior is disabled. To enable it, set the collapsible property within paneSettings. This displays expand and collapse icons in the panes. You can dynamically expand and collapse the panes by clicking on the corresponding icons
The following example demonstrates how to enable collapsible behavior:
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='template_container'>
<ejs-splitter #expand height='250px' width='580px' >
<e-panes>
<e-pane size='200px' [collapsible]='true'>
<ng-template #content>
<div class="template">
<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' [collapsible]='true'>
<ng-template #content>
<div class="template">
<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' [collapsible]='true'>
<ng-template #content>
<div class="template">
<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));Programmatically control the expand and collapse action
You can also control pane visibility programmatically using the Splitter’s public methods: expand and collapse. These methods allow you to dynamically toggle panes based on application logic.
Here’s an example of using these methods:
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 #splitterInstance height='200px' width='600px'>
<e-panes>
<e-pane size='200px' [collapsible]='true' content='<div class="content" >Left pane</div>'>
</e-pane>
<e-pane size='200px' [collapsible]='true' content='<div class="content">Middle pane</div>'>
</e-pane>
<e-pane size='200px' [collapsible]='true' content='<div class="content">Right pane</div>'>
</e-pane>
</e-panes>
</ejs-splitter>
<button ejs-button id='expand' (click)="expandClick()">Expand</button>
<button ejs-button id='collapse' (click)="collapseClick()">Collapse</button>
</div>`
})
export class AppComponent {
constructor() {
}
@ViewChild('splitterInstance') splitterObj?: SplitterComponent;
public expandClick: any = () => {
this.splitterObj?.collapse(0);
}
public collapseClick: any = () => {
this.splitterObj?.expand(0);
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Set initial collapsed state
To render a pane in a collapsed state on initial load, set the collapsed property to true. This is useful for customizing the default layout based on user preferences or screen size.
In the following example, the second pane is rendered in a collapsed state:
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 #collapsed height='200px' width='600px'>
<e-panes>
<e-pane size='200px' [collapsible]='true' content='<div class="contents"><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>'>
</e-pane>
<e-pane [collapsible]='true' [collapsed]='true' size='200px' content='<div class="contents"><h3 class="h3">CAMEMBERT </h3>The village in the Orne département of Normandy where the famous French cheese is originated from.</div>'>
</e-pane>
<e-pane [collapsible]='true' size='200px' content='<div class="contents"><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>'>
</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));Explore our Angular Splitter Expand and Collapse example to see this feature in action.