---
title: "Angular Select Event hooks Example | Mobiscroll"
component: "Select"
framework: "Angular"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/angular/select/event-hooks"
---
# Event hooks - Angular Select demo
Angular Select demo with event hooks for custom integration and functionality.
- [Live demo](https://demo.mobiscroll.com/angular/select/event-hooks)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/pickers/select/event-hooks)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/select/event-hooks.md), [jQuery](https://demo.mobiscroll.com/jquery/select/event-hooks.md), [React](https://demo.mobiscroll.com/react/select/event-hooks.md), [Vue](https://demo.mobiscroll.com/vue/select/event-hooks.md)
## Description
The select ships with different event hooks for deep customization. Events are triggered through the lifecycle of the component where you can tie in custom functionality and code.
While users interact with the UI events like `onChange`, `onSet`, `onInit` ... will be triggered.
**For a complete list of events go to the documentation** [See available lifecycle events →](https://mobiscroll.com/docs/angular/select/api#events)
## What this demo shows
- Shows a single-value select examples with the fired event hooks.
- **Select input** This example opens the picker when the user focuses or clicks the input. It can also be opened with the `Show` button below the input. While with the `Clear` button you can clear the selected value.
- **Input behavior** The picker opens below the input and closes when the user clicks outside it.
- **Filtering** In the header of the picker there is a serach bar where entering a text filters the available options.
- **Picker content** Show a predefined list of options in a dropdown-style popup.
- **Hover state** Hovering over an option highlights it in the picker.
- **Selection** Selecting an option marks it with a checkmark to indicate the current value.
- **Input value** Selecting an option updates the input with that value. With the `Clear` button, below the input, you can clear the selected value.
- **Event log** An `Event log` panel is shown on the left and lists the lifecycle events fired during interactions such as click, hover, and similar actions.
## Best for
- **Lifecycle event discovery** Understanding which select lifecycle hooks fire during common user interactions.
## Tutorial
```html
```
```ts
onCancel(event: any): void { /* Logic for cancel button click */ }
onChange(event: any): void { /* Logic for value change */ }
onClose(event: any): void { /* Your custom event handler goes here */ }
onDestroy(event: any): void { /* Your custom event handler goes here */ }
onFilter(event: any): void { /* Your custom filtering goes here */ }
onInit(event: any): void { /* Logic for label click */ }
onOpen(event: any): void { /* Your custom event handler goes here */ }
onTempChange(event: any): void { /* Logic for temporary value change */ }
```
## API used in this demo
- [`theme`](https://mobiscroll.com/docs/angular/select/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/angular/select/api#opt-themeVariant) - option
- [`data`](https://mobiscroll.com/docs/angular/select/api#opt-data) - option
- [`label`](https://mobiscroll.com/docs/angular/select/api#opt-label) - option
- [`inputStyle`](https://mobiscroll.com/docs/angular/select/api#opt-inputStyle) - option
- [`labelStyle`](https://mobiscroll.com/docs/angular/select/api#opt-labelStyle) - option
- [`onCancel`](https://mobiscroll.com/docs/angular/select/api#event-onCancel) - event
- [`onChange`](https://mobiscroll.com/docs/angular/select/api#event-onChange) - event
- [`onClose`](https://mobiscroll.com/docs/angular/select/api#event-onClose) - event
- [`onDestroy`](https://mobiscroll.com/docs/angular/select/api#event-onDestroy) - event
- [`onInit`](https://mobiscroll.com/docs/angular/select/api#event-onInit) - event
- [`onOpen`](https://mobiscroll.com/docs/angular/select/api#event-onOpen) - event
- [`onTempChange`](https://mobiscroll.com/docs/angular/select/api#event-onTempChange) - event
## Code
### Component
```ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MbscModule, setOptions } from '@mobiscroll/angular';
setOptions({
theme: 'ios',
themeVariant: 'light'
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, MbscModule],
})
export class AppComponent {
myData = [
{
text: 'Atlanta',
value: 'atl',
},
{
text: 'Berlin',
value: 'ber',
},
{
text: 'Boston',
value: 'bos',
},
{
text: 'Chicago',
value: 'chi',
},
{
text: 'London',
value: 'lon',
},
{
text: 'Los Angeles',
value: 'la',
},
{
text: 'New York',
value: 'ny',
},
{
text: 'Paris',
value: 'par',
},
{
text: 'San Francisco',
value: 'sf',
},
];
onCancel(): void {
// Logic for cancel button click
}
onChange(): void {
// Logic for value change
}
onClose(): void {
// Your custom event handler goes here
}
onDestroy(): void {
// Your custom event handler goes here
}
onFilter(): void {
// Your custom event handler goes here
}
onInit(): void {
// Logic running on component init
}
onOpen(): void {
// Your custom event handler goes here
}
onTempChange(): void {
// Logic for temporary value change
}
}
```
### Template
```html
```
## Implementation notes
- The demo wires eight lifecycle/interaction events: `onInit` (fires once when the picker instance is created), `onOpen` (fires when the picker starts opening), `onChange` (fires when the confirmed value changes, i.e. after `Set`/selection), `onTempChange` (fires on every temporary/in-progress selection before it's confirmed), `onFilter` (fires when the header search box's filter text changes), `onCancel` (fires when the picker is dismissed via the `Cancel` action), `onClose` (fires when the picker starts closing, regardless of confirm/cancel), and `onDestroy` (fires when the picker instance is destroyed).
- `filter: true` adds a search input to the popup header; typing into it narrows the visible option list and fires `onFilter` on each keystroke - this is a real Select option, not demo chrome.
- All handlers receive `(event, inst)` in JS/jQuery - `event` carries hook-specific data and `inst` is the select instance.
- Event wiring differs per framework: JS/jQuery pass `onInit`/`onOpen`/`onChange`/`onTempChange`/`onFilter`/`onCancel`/`onClose`/`onDestroy` as function options inside `.select({ ... })`; React binds them as same-named props (`onInit`, `onOpen`, `onChange`, `onTempChange`, `onFilter`, `onCancel`, `onClose`, `onDestroy`) on `