# Splitter Events

The Kendo UI for Angular Splitter emits events when the layout changes and when individual panes change size or collapsed state. Use these events to persist pane state, or to refresh components that need a new layout measurement after the user resizes or collapses a pane.

The Splitter exposes one event on the `kendo-splitter` component and two more events on each `kendo-splitter-pane`. This distinction is important because `layoutChange` notifies you that the layout changed, while the pane events provide the pane-specific values that changed.

The following table summarizes the Splitter event surface.

| Event                                                                                                                     | Emitted by            | Event data                                              | Use when                                                                 |
| :------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :------------------------------------------------------ | :----------------------------------------------------------------------- |
| [`layoutChange`](https://www.telerik.com/kendo-angular-ui/components/layout/api/splittercomponent#layoutchange)           | `kendo-splitter`      | No pane-specific data                                   | You need to recalculate or redraw content after the pane layout changes. |
| [`sizeChange`](https://www.telerik.com/kendo-angular-ui/components/layout/api/splitterpanecomponent#sizechange)           | `kendo-splitter-pane` | The new pane size as a string, such as `240px` or `50%` | You need to persist or react to pane size changes.                       |
| [`collapsedChange`](https://www.telerik.com/kendo-angular-ui/components/layout/api/splitterpanecomponent#collapsedchange) | `kendo-splitter-pane` | The new collapsed state as `true` or `false`            | You need to persist or react to pane visibility changes.                 |

> tip `layoutChange` does not include the updated pane size or collapsed state. When you need those values, handle `sizeChange` or `collapsedChange` on the affected pane.

The following example demonstrates how the Splitter and pane events are emitted during resize, collapse, and expand actions.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/splitter/events/source.txt)

## Suggested Links

* [API Reference of the Splitter](https://www.telerik.com/kendo-angular-ui/components/layout/api/splittercomponent)
* [API Reference of the SplitterPane](https://www.telerik.com/kendo-angular-ui/components/layout/api/splitterpanecomponent)
* [Splitter Panes](https://www.telerik.com/kendo-angular-ui/components/layout/splitter/panes)