Getting started with Angular Splitter component

26 Jul 20265 minutes to read

The Splitter component divides a container into multiple resizable panes, enabling users to adjust the available space between sections dynamically. It supports both horizontal and vertical layouts through the orientation property.

This guide provides step-by-step instructions for setting up an Angular project with TypeScript using Angular CLI, and integrating Syncfusion® Angular Splitter component. The recommended setup below targets modern Angular (CLI ng add). For module-based or framework host setups, see See Also.

The Angular CLI simplifies creating, managing, and building Angular applications so you can start development quickly.

Prerequisites

  • Install a supported Node.js LTS release and npm (or another Node package manager) before continuing.
  • Ensure your environment meets the System Requirements for Syncfusion® Angular UI Components.
  • Supported Angular and Syncfusion package combinations are listed in the Version Compatibility guide. This walkthrough assumes Angular 17+ with the default application scaffolding (src/app/app.ts or the equivalent root component generated by your CLI version).

Setup the Angular application

A straightforward approach to beginning with Angular is to create a new application using the Angular CLI. Install Angular CLI globally with the following command:

npm install -g @angular/cli

Angular 21 Standalone Architecture: Standalone components are the default in Angular 21. This guide uses the modern standalone architecture. If you need more information about the standalone architecture, refer to the Standalone Guide.

Create a new application

With Angular CLI installed, execute this command to generate a new application:

ng new syncfusion-angular-app
  • This command will prompt you to configure settings like enabling Angular routing and choosing a stylesheet format.
? Which stylesheet format would you like to use? (Use arrow keys)
> CSS             [ https://developer.mozilla.org/docs/Web/CSS                     ]
  Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass (Indented) [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less            [ http://lesscss.org                                             ]
  • By default, a CSS-based application is created. Use SCSS if required:
ng new syncfusion-angular-app --style=scss
  • During project setup, when prompted for the Server-side rendering (SSR) option, choose the appropriate configuration.

Initial_setup

  • Select the required AI tool or ‘none’ if you do not need any AI tool.

Initial_setup

  • Navigate to your newly created application directory:
cd syncfusion-angular-app

Note: In Angular 19 and below, it uses app.component.ts, app.component.html, app.component.css etc. In Angular 20+, the CLI generates a simpler structure with src/app/app.ts, app.html, and app.css (no .component. suffixes).

Adding the Syncfusion® Angular Splitter package

To install the Syncfusion® Angular Splitter package, use the following command:

ng add @syncfusion/ej2-angular-layouts

The ng add command installs the package, registers it in package.json, and configures the required entries in your workspace automatically.

If ng add is unavailable in your setup, install the package manually with:

npm install @syncfusion/ej2-angular-layouts

Adding CSS reference

Themes for the Syncfusion® Splitter component can be applied using CSS files provided through npm theme packages. For available themes, refer to the Themes documentation.

Install the Material 3 theme package using the following npm command:

npm install @syncfusion/ej2-material3-theme

Then add the following CSS reference to the src/styles.css file. This is the default global stylesheet registered under styles in angular.json:

@import "../node_modules/@syncfusion/ej2-material3-theme/styles/splitter/index.css";

You can also refer to the combined CSS file for all Syncfusion components in your application. For more information, see the documentation on referring themes through npm packages.

Add Syncfusion® Splitter component

After package and theme setup, update the root component. File name and class name can vary by Angular CLI version (src/app/app.ts with export class App, or app.component.ts with AppComponent). Replace the root component content with the sample below, or merge the Splitter import, template, and data into your generated file.

For the full property list, see the Splitter API reference.

Adding Splitter module

After installing the layouts package, import the required module in your application. Syncfusion® Angular packages offer multiple NgModule options.

Refer to the following snippet to import the SplitterModule in app.module.ts from the @syncfusion/ej2-angular-layouts.

import { SplitterModule } from '@syncfusion/ej2-angular-layouts';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  imports: [SplitterModule],
  templateUrl: './app.html',
  styleUrl: './app.css',

})
export class App {
}

Place the following markup in the component template file referenced by templateUrl (for example, src/app/app.html):

    <div id='container'>
          <ejs-splitter #horizontal height='250px' width='600px'>
            <e-panes>
                <e-pane></e-pane>
                <e-pane></e-pane>
                <e-pane></e-pane>
            </e-panes>
          </ejs-splitter>
    </div>

Running the application

From the project root:

ng serve

When the build succeeds, the CLI reports a local URL (default: http://localhost:4200). Open that URL in a browser to view the Splitter. If the port is already in use, the CLI prompts for another port, or you can run ng serve --port 4201.

Stop the server with Ctrl+C in the terminal.

The following example illustrates the output in your browser.

See Also