Como obter um novo valor de um select no Angular 2 em 2025: melhores práticas

Como obter um novo valor de um select no Angular 2+: do iniciante ao profissional

Você já se sentou à noite com uma xícara de café, escrevendo código em Angular e de repente pensou: "Droga, como eu capturo o momento em que o usuário selecionou uma nova opção em <select>?"? Se sim — você não está sozinho. A pergunta "How can I get new selection in 'select' in Angular 2?" no Stack Overflow acumulou dezenas de milhares de visualizações. E não é surpresa: no Angular existem três maneiras de fazer isso, e os iniciantes frequentemente se confundem sobre qual escolher.

Neste artigo, abordaremos todas as abordagens atuais em TypeScript que funcionam no Angular 2+ em 2025. Você aprenderá a usar ngModel, formulários reativos e o manipulador (change), além de obter recomendações claras sobre quando e o que usar. Vamos lá!

O problema: por que um simples select no Angular não é apenas HTML?

Em HTML comum, você escreveria:

<select id="city" onchange="handleChange(event)">\n  <option value="msk">Moscou</option>\n  <option value="spb">São Petersburgo</option>\n</select>

E a função handleChange(event) receberia o evento. No Angular, é um pouco mais complexo (mas também mais flexível). Você não precisa apenas "capturar o clique", mas sim vincular os dados corretamente, processar a alteração e evitar erros comuns, como perda de reatividade ou re-renderizações desnecessárias.

Vamos analisar as três principais maneiras que você usará em 2025.

Método 1: Clássico (ngModel + (change)) — simples e confiável

Esta abordagem é adequada para formulários simples, onde você não precisa de validação complexa. Você vincula o select a uma variável usando [(ngModel)] e escuta o evento (change).

Exemplo de código

// 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[] = ['Moscou', 'São Petersburgo', 'Kazan'];\n\n  onCityChange(newCity: string): void {\n    console.log('Cidade selecionada:', newCity);\n    // Aqui você pode fazer uma requisição à API ou alterar outras partes da UI\n  }\n}

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

Importante! No Angular 2+, o evento (change) é acionado após o modelo ser atualizado. Portanto, selectedCity dentro de onCityChange já contém o novo valor. Se você precisar do valor antigo — salve-o em uma variável separada antes da alteração.

Método 2: Formulários reativos — potência e controle

Se você está construindo uma aplicação séria com validação, campos dinâmicos ou assinaturas — use formulários reativos. Este é o padrão da indústria em 2025.

Passo 1: Importe o ReactiveFormsModule

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

Passo 2: Crie um FormControl e inscreva-se nas alterações

// 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[] = ['Moscou', 'São Petersburgo', 'Kazan'];\n\n  ngOnInit(): void {\n    // Inscrevendo-se nas alterações de valor\n    this.cityControl.valueChanges.subscribe((newCity: string) => {\n      console.log('Nova cidade do formulário reativo:', newCity);\n    });\n  }\n}