How to Get a New Value from Select in Angular 2 in 2025: Best Practices

How to Get a New Value from Select in Angular 2+: From Beginner to Pro

Have you ever sat down in the evening with a cup of coffee, writing Angular code, and suddenly realized: "Damn, how do I catch the moment when a user selects a new option in <select>?"? If so — you are not alone. The question "How can I get new selection in 'select' in Angular 2?" on Stack Overflow has gathered tens of thousands of views. And it's no wonder: Angular has three whole ways to do this, and beginners often get confused about which one to choose.

In this article, we will break down all the current TypeScript approaches that work in Angular 2+ in 2025. You will learn how to use ngModel, reactive forms, and the (change) handler, and also get clear recommendations on when and what to use. Let's go!

The Problem: Why is a Simple Select in Angular Not Just HTML?

In plain HTML, you would write:

<select id="city" onchange="handleChange(event)">\n  <option value="msk">Moscow</option>\n  <option value="spb">Saint Petersburg</option>\n</select>

And the handleChange(event) function would receive the event. In Angular, it's a bit more complex (but also more flexible). You need not just to "catch a click," but to properly bind data, handle the change, and avoid common mistakes like losing reactivity or causing unnecessary re-renders.

Let's look at the three main methods you will use in 2025.

Method 1: Classic (ngModel + (change)) — Simple and Reliable

This approach is suitable for simple forms where you don't need complex validation. You bind the select to a variable using [(ngModel)] and listen to the (change) event.

Code Example

// app.component.ts\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html'\n})\nexport class AppComponent {\n  selectedCity: string = '';\n  cities: string[] = ['Moscow', 'Saint Petersburg', 'Kazan'];\n\n  onCityChange(newCity: string): void {\n    console.log('City selected:', newCity);\n    // Here you can make an API request or change other parts of the UI\n  }\n}

<!-- app.component.html -->\n<select [(ngModel)]="selectedCity" (change)="onCityChange(selectedCity)">\n  <option value="" disabled>Select a city</option>\n  <option *ngFor="let city of cities" [value]="city">{{ city }}</option>\n</select>

Important! In Angular 2+, the (change) event fires after the model has been updated. Therefore, selectedCity inside onCityChange already contains the new value. If you need the old value — save it in a separate variable before the change.

Method 2: Reactive Forms — Power and Control

If you are building a serious application with validation, dynamic fields, or subscriptions — use reactive forms. This is the industry standard in 2025.

Step 1: Import ReactiveFormsModule

// app.module.ts\nimport { ReactiveFormsModule } from '@angular/forms';\n\n@NgModule({\n  imports: [\n    ReactiveFormsModule\n  ]\n})\nexport class AppModule { }

Step 2: Create a FormControl and Subscribe to Changes

// app.component.ts\nimport { Component, OnInit } from '@angular/core';\nimport { FormControl } from '@angular/forms';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html'\n})\nexport class AppComponent implements OnInit {\n  cityControl = new FormControl('');\n  cities: string[] = ['Moscow', 'Saint Petersburg', 'Kazan'];\n\n  ngOnInit(): void {\n    // Subscribe to value changes\n    this.cityControl.valueChanges.subscribe((newCity: string) => {\n      console.log('New city from reactive f