syncfusion-angular-splitter

What this skill does

# 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](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](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](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](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](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](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](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](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](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](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](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](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

```typescript
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

```typescript
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:

```typescript
<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:

```typescript
<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:

```typescript
<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 pixel