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:

  {{ device }}

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:

  {{ device }}

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:

  {{ device }}

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:

@for ( device of devices; track device.id) {
{{ device.name }}
} @empty {
 No devices found 
} 

TypeScript:

import { Component, Signal, signal } from '@angular/core';
@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
})
export class AppComponent {
  selectedDevice: Signal = 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());
  }
}

Key Points:

• Uses Signals (signal()), which are reactive and efficient.
• Eliminates the need for ngModel or manual state management.

Also Read:

Angular Micro Frontends