Detectando Mudanças no Valor de um Input em Angular

Neste artigo você aprenderá a identificar mudanças no valor de um Input em Angular, uma ação importante ao lidar com formulários

Fala programador(a), beleza? Bora aprender mais sobre Angular!

Ao construir aplicações web interativas, frequentemente nos deparamos com a necessidade de responder a alterações nos campos de input.

No Angular, uma das mais populares frameworks frontend, existem várias formas de detectar e responder a essas mudanças.

Neste artigo, exploraremos essas diferentes abordagens e suas melhores práticas.

O Evento (input)

Introdução ao Event Binding

O Angular fornece uma sintaxe fácil e intuitiva para vincular eventos DOM a métodos do componente.

O evento input é disparado toda vez que o valor de um campo de input muda.

Exemplo Prático

import { Component } from '@angular/core';

@Component({
  selector: 'app-detect-input',
  template: `
    <input (input)="detectChange($event)" placeholder="Digite algo">
  `
})
export class DetectInputComponent {
  detectChange(event: any) {
    console.log(event.target.value);
  }
}

Neste exemplo, sempre que o valor do input muda, a função detectChange é chamada, e o novo valor é exibido no console.

A Diretiva ngModel

Vinculação Bidirecional com ngModel

Enquanto o evento (input) nos permite detectar mudanças no valor de um input, o Angular também fornece a diretiva ngModel para realizar a vinculação bidirecional entre o valor do input e uma propriedade do componente.

Exemplo com ngModel

Primeiro, é importante lembrar de importar o FormsModule no módulo de seu componente.

import { Component } from '@angular/core';

@Component({
  selector: 'app-detect-input-ngmodel',
  template: `
    <input [(ngModel)]="texto" (ngModelChange)="detectChange()">
  `
})
export class DetectInputNgModelComponent {
  texto: string;

  detectChange() {
    console.log(this.texto);
  }
}

Com essa abordagem, o valor do input é sincronizado com a propriedade texto do componente, e toda vez que esse valor muda, a função detectChange é chamada.

Usando FormControl e valueChanges

Para uma abordagem mais reativa e quando estamos trabalhando com formulários reativos no Angular, podemos usar o FormControl juntamente com a propriedade valueChanges.

Exemplo com Formulário Reativo

Primeiro, você precisa importar o ReactiveFormsModule.

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-detect-input-reactive',
  template: `
    <input [formControl]="meuInput">
  `
})
export class DetectInputReactiveComponent implements OnInit {
  meuInput = new FormControl('');

  ngOnInit() {
    this.meuInput.valueChanges.subscribe(valor => {
      console.log(valor);
    });
  }
}

Com essa abordagem, toda vez que o valor do input muda, a nova entrada é logada no console, graças ao observável valueChanges.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Detectar mudanças no valor de um input é uma tarefa comum ao desenvolver aplicações interativas.

O Angular oferece várias maneiras de realizar isso, desde a vinculação direta de eventos, até abordagens mais reativas com formulários reativos.

Escolher a abordagem correta depende das necessidades específicas de sua aplicação e de sua familiaridade com os conceitos do Angular.

Independentemente da abordagem escolhida, o Angular oferece as ferramentas necessárias para construir aplicações robustas e reativas.

Está buscando evoluir como Programador? Confira o nossos cursos de programação.