How to Get New Selection in Select in Angular

Home Q&A How to Get New Selection in Select in Angular

The (change) event in Angular works differently based on how data binding is implemented. Below is a breakdown by version with examples.

AngularJS (1.x)

In AngularJS, you use ng-model to bind the selected value and ng-change to detect changes.

Example (AngularJS – ng-change)

HTML:

<select ng-model="selectedDevice" ng-change="onChange(selectedDevice)">
  <option ng-repeat="device in devices" value="{{device}}">{{ device }}</option>
</select>

JavaScript:

$scope.devices = ['Device 1', 'Device 2', 'Device 3'];
$scope.selectedDevice = '';

$scope.onChange = function(newValue) {
    console.log('New Selected Device:', newValue);
};

Key Points:

ng-change fires when the model changes.
The new value is passed directly to the function

Angular 2+ Using (ngModelChanges)

(ngModelChange) fires immediately when the model updates, making it ideal for real-time updates.

Example (ngModelChange)

HTML:

<select [(ngmodel)]="selectedDevice" (ngmodelchange)="onChange($event)">
  <option *ngfor="let device of devices" [value]="device">{{ device }}</option>
</select>

TypeScript:

onChange(newValue: string) {
    console.log('New Selected Device:', newValue);
}

Key Points:

Fires immediately when the model changes.
Provides the new value directly in $event.
Best for real-time updates.

Example (change event)

HTML:

<select [(ngmodel)]="selectedDevice" (change)="onChange($event)">
  <option *ngfor="let device of devices" [value]="device">{{ device }}</option>
</select>

TypeScript:

onChange(event: Event) {
    this.selectedDevice = (event.target as HTMLSelectElement).value;
    console.log('New Selected Device:', this.selectedDevice);
}

Key Points:

Fires only after the selection is confirmed.
Requires manually extracting the selected value from $event.target.value.
Useful when changes should be applied after user confirmation.

Key Differences Between (ngModelChange) and (change)

(ngModelChange) updates immediately, while (change) fires after user confirmation.
(ngModelChange) provides the new value directly, while (change) requires extracting the value manually.
(ngModelChange) is better for real-time updates, while (change) is useful for delayed actions.

Angular 17+: Using Signals

Angular 17 introduced Signals, an optimized state management approach for better reactivity.

Example (Using Signals)

HTML:

<select [value]="selectedDevice()" (change)="onChange($event)">
@for ( device of devices; track device.id) {
<option [value]="device">{{ device.name }}</option>
} @empty {
<li> No devices found </li>
} 
</select>

JavaScript:

import { Component, Signal, signal } from '@angular/core';
@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
})
export class AppComponent {
  selectedDevice: Signal<string> = signal('');
  devices = ['Device 1', 'Device 2', 'Device 3'];
  onChange(event: Event) {
    this.selectedDevice.set((event.target as HTMLSelectElement).value);
    console.log('New Selected Device:', this.selectedDevice());
  }
}
</string>