Syncfusion Angular Splitter

Implementing Syncfusion Angular Splitter

The Splitter component divides a container into resizable panes separated by draggable separator bars. This enables flexible, user-controllable multi-pane layouts for dashboards, editors, and complex UI structures.

When to Use This Skill

• Dashboard layouts: Create multi-column dashboards with resizable panels
• Editor interfaces: Build text editors, code editors, or IDEs with side panels
• Navigation + content: Implement sidebar navigation with main content area
• Data exploration: Design interfaces with filters, previews, and detailed views
• Nested layouts: Create complex hierarchical pane structures
• Dynamic interfaces: Add/remove panes programmatically based on user actions
• Responsive splitting: Support both horizontal and vertical orientations
• Constrained resizing: Enforce min/max pane sizes for layout stability

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Package installation and setup
• Standalone component vs NgModule imports
• Basic Splitter component setup
• CSS theme imports
• First working example

API Reference (Complete)

📄 Read: references/api-reference.md

• All component properties (orientation, height, width, etc.)
• All pane properties (size, min, max, collapsible, etc.)
• All public methods (addPane, removePane, expand, collapse)
• All 8 events with argument details
• Complete working examples

Pane Orientation & Layout

📄 Read: references/split-panes.md

• Horizontal layout (default, side-by-side panes)
• Vertical layout (stacked panes with horizontal separator)
• Multiple panes (3+ panes in single splitter)
• Nested splitters (splitter within pane content)
• Template-based pane content

Pane Sizing & Configuration

📄 Read: references/pane-sizing.md

• Fixed pixel sizing (200px, 300px)
• Responsive percentage sizing (30%, 50%)
• Auto-sizing (flex layout, automatic distribution)
• Mixed sizing strategies in single splitter
• Dynamic pane size adjustments

Expand & Collapse Functionality

📄 Read: references/expand-collapse.md

• Collapsible panes (user-clickable expand/collapse icons)
• Collapsed state on initialization
• Programmatic expand() method
• Programmatic collapse() method
• Dynamic pane visibility control

Resizing & Interaction

📄 Read: references/resizing.md

• Resize behavior and dragging separator
• Fixed panes (non-resizable, static size)
• Resizable pane configuration
• Min/max size constraints (pane validation)
• Preventing invalid resize operations

Layout Patterns & Recipes

📄 Read: references/layout-patterns.md

• Two-pane sidebar layouts
• Three-pane editor layouts (left sidebar, main content, right panel)
• Nested splitters and complex hierarchies
• Common UI patterns with complete code examples
• Layout composition strategies

Styling & Customization

📄 Read: references/styling-customization.md

• Theme application (Material3, Bootstrap, etc.)
• CSS class customization
• Separator styling and sizing
• Pane content styling

Globalization & Localization

📄 Read: references/globalization.md

• Right-to-left (RTL) language support (Arabic, Hebrew)
• Locale and culture configuration
• Text direction attributes
• Multi-language content
• Locale-aware formatting

Content Loading

📄 Read: references/content-loading.md

• HTML element content
• String content via content property
• ng-template content (template-based)
• DOM selector content (external HTML)
• Dynamic content updates

Dynamic Pane Manipulation

📄 Read: references/dynamic-manipulation.md

• Adding panes with addPane() method
• Removing panes with removePane() method
• Pane configuration and properties
• Dynamic pane state management
• Methods and events reference
• Constraints during manipulation

Security Best Practices

📄 Read: references/security-best-practices.md

• HTML sanitization and XSS prevention
• enableHtmlSanitizer property usage
• Content validation patterns
• Safe content sources and ranking
• Common vulnerabilities to avoid
• Secure code examples

Quick Start

Basic Two-Pane Layout

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

@Component({
  selector: 'app-splitter',
  standalone: true,
  imports: [SplitterModule],
  template: `
    <ejs-splitter height="400px" width="100%">
      <e-panes>
        <e-pane size="300px">
          <ng-template #content>
            <div>Left Pane</div>
          </ng-template>
        </e-pane>
        <e-pane size="300px">
          <ng-template #content>
            <div>Right Pane</div>
          </ng-template>
        </e-pane>
      </e-panes>
    </ejs-splitter>
  `
})
export class SplitterComponent {}

Vertical Layout with Collapsible Panes

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

@Component({
  selector: 'app-vertical-splitter',
  standalone: true,
  imports: [SplitterModule],
  template: `
    <ejs-splitter orientation="Vertical" height="400px" width="100%">
      <e-panes>
        <e-pane size="150px" [collapsible]="true">
          <ng-template #content>
            <div>Header Panel</div>
          </ng-template>
        </e-pane>
        <e-pane [collapsible]="true">
          <ng-template #content>
            <div>Content Area</div>
          </ng-template>
        </e-pane>
      </e-panes>
    </ejs-splitter>
  `
})
export class VerticalSplitterComponent {}

Common Patterns

Sidebar + Content Layout

The classic two-pane layout with a fixed sidebar and flexible content area:

<ejs-splitter height="500px" width="100%">
  <e-panes>
    <!-- Fixed sidebar -->
    <e-pane size="250px">
      <ng-template #content>
        <div class="sidebar">
          <ul>
            <li>Navigation Item 1</li>
            <li>Navigation Item 2</li>
          </ul>
        </div>
      </ng-template>
    </e-pane>
    <!-- Flexible content -->
    <e-pane>
      <ng-template #content>
        <div class="content">Main Content Area</div>
      </ng-template>
    </e-pane>
  </e-panes>
</ejs-splitter>

Responsive Percentage-Based Layout

Panes that resize based on container size:

<ejs-splitter height="400px" width="100%">
  <e-panes>
    <e-pane size="25%">
      <ng-template #content>25% Panel</ng-template>
    </e-pane>
    <e-pane size="50%">
      <ng-template #content>50% Panel</ng-template>
    </e-pane>
    <e-pane size="25%">
      <ng-template #content>25% Panel</ng-template>
    </e-pane>
  </e-panes>
</ejs-splitter>

Collapsible Dashboard Panels

Panes with expand/collapse icons for compact UI:

<ejs-splitter height="500px" width="100%">
  <e-panes>
    <e-pane size="200px" [collapsible]="true">
      <ng-template #content>
        <div>Filters Panel (Collapsible)</div>
      </ng-template>
    </e-pane>
    <e-pane [collapsible]="true">
      <ng-template #content>
        <div>Main Dashboard</div>
      </ng-template>
    </e-pane>
    <e-pane size="300px" [collapsible]="true">
      <ng-template #content>
        <div>Details Panel (Collapsible)</div>
      </ng-template>
    </e-pane>
  </e-panes>
</ejs-splitter>

Key Features

Related Skills

• Data Grids - Display tabular data within splitter panes
• Charts & Visualization - Embed dashboards and analytics in split layouts
• Navigation Components - Build sidebars and navigation structures with splitter

Next Steps: Choose a reference file based on your specific use case, then refer to the code snippets and examples provided.