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

Feature	Purpose	When to Use
Orientation	Horizontal or vertical pane layout	Choose based on UI design needs
Pane Sizing	Fixed pixels, percentages, or auto	Mix sizing strategies for responsive layouts
Collapsible	User-controlled expand/collapse	Save space in dashboards and editors
Fixed Panes	Non-resizable panes with static size	Create stable reference areas (sidebars)
Min/Max Constraints	Enforce pane size limits	Prevent layout breaking during resize
Nested Splitters	Splitter within splitter panes	Create complex hierarchical layouts
Dynamic Manipulation	Add/remove panes programmatically	Adapt UI to user actions or data changes
Content Flexibility	HTML, strings, templates, selectors	Load any type of content into panes
Themes & Styling	Multiple built-in themes	Apply consistent design across app

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.