# Diagram Events

The [Kendo UI for Angular Diagram](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams) provides a comprehensive set of [events](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/diagramcomponent#events) that enable you to respond to user interactions, shape modifications, and other diagram-related activities. This article describes all available events and how to handle them.

| Event               | Description                                                                                                 |
| ------------------- | ----------------------------------------------------------------------------------------------------------- |
| `change`            | Fired when the diagram content changes, such as when shapes or connections are added, removed, or modified. |
| `diagramClick`      | Fired when the user clicks on a shape or a connection.                                                      |
| `drag`              | Fired continuously while dragging shapes or connections within the diagram.                                 |
| `dragEnd`           | Fired when a drag operation is completed.                                                                   |
| `dragStart`         | Fired when a drag operation begins on a shape or connection.                                                |
| `shapeBoundsChange` | Fired when the bounds (position or size) of a shape are modified.                                           |
| `mouseEnter`        | Fired when the mouse pointer enters a shape or connection area.                                             |
| `mouseLeave`        | Fired when the mouse pointer leaves a shape or connection area.                                             |
| `pan`               | Fired when the diagram viewport is panned (moved) by the user.                                              |
| `select`            | Fired when shapes or connections are selected or deselected.                                                |
| `tooltipShow`       | Fired when a tooltip displays for a shape or connection.                                                    |
| `tooltipHide`       | Fired when a tooltip hides.                                                                                 |
| `zoomEnd`           | Fired when a zoom operation is completed.                                                                   |
| `zoomStart`         | Fired when a zoom operation begins.                                                                         |

The following example demonstrates all available events in action.

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

## See Also

* [Diagram Shapes](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/shapes)
* [Diagram Connections](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/connections)
* [Diagram Layouts](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/layouts)
* [Diagram API Reference](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api)