Vinculando Dados - Angular

O Angular suporta um mecanismo de vinculação, permitindo que diferentes partes do template sejam vinculadas a valores específicos definidos no componente.

No Angular, existem as seguintes formas de vinculação de dados:

• Vinculação de um elemento DOM ao valor do componente (unidirecional). Nas chaves duplas, é especificada uma expressão que é vinculada: {{expressão}}. Por exemplo:

  content_copy

  <h1>Bem-vindo, {{name}}!</h1>

• Vinculação de uma propriedade de elemento DOM ao valor do componente (unidirecional). Por exemplo:

  content_copy

  <input type="text" [value]="name" />

• Vinculação de um método do componente a um evento no DOM (um evento no DOM chama o método no componente) (unidirecional). Por exemplo:

  content_copy

  <button (click)="addItem(text, price)">Adicionar</button>

• Vinculação bidirecional, onde o elemento DOM é vinculado a um valor no componente. Neste caso, mudanças em qualquer dos lados da vinculação são refletidas automaticamente no outro. Por exemplo:

  content_copy

  <input [(ngModel)]="name" placeholder="name">

Além disso, é possível vincular a atributos de elementos HTML, a classes CSS e a estilos de elementos HTML.

Interpolação

A primeira forma de vinculação envolve o uso de chaves duplas, onde o valor do componente é passado para o template. Por exemplo, considere o seguinte componente:

import { Component } from "@angular/core";
      
@Component({
    selector: "my-app",
    standalone: true,
    template: `<p>Nome: {{name}}</p>
                <p>Idade: {{age}}</p>`
})
export class AppComponent { 
    name = "Tom";
    age = 25;
}

Ao executar a aplicação, expressões como {{ name }} serão automaticamente substituídas pelos valores correspondentes definidos no componente:

Se durante a execução da aplicação as propriedades name e age no componente forem alteradas, os valores na marcação HTML, vinculados a essas propriedades, também serão atualizados automaticamente.

Vinculação de Propriedades dos Elementos HTML

Podemos vincular valores a uma propriedade de um elemento HTML. Nesse caso, a propriedade é indicada entre colchetes:

import { Component } from "@angular/core";
      
@Component({
    selector: "my-app",
    standalone: true,
    template: `<input type="text" [value]="name" />`
})
export class AppComponent { 
    name = "Tom";
}

É importante entender que essa vinculação não está relacionada ao atributo, mas sim à propriedade do elemento no JavaScript, que representa esse elemento HTML. Por exemplo, o elemento <input /> no JavaScript é representado pela interface HTMLInputElement, que possui a propriedade value.

No entanto, poderíamos escrever o código da seguinte maneira:

Nesse caso, estamos passando o valor ao atributo do elemento utilizando interpolação.

Outro exemplo:

O elemento <p> não possui um atributo textContent, mas a interface Node, que representa esse elemento DOM, possui a propriedade textContent, à qual podemos vincular um valor.

Vinculação a Atributos

Às vezes, é necessário vincular não a uma propriedade, mas diretamente a um atributo do elemento HTML. Embora propriedades e atributos possam se sobrepor, como no exemplo da propriedade/atributo value, isso nem sempre acontece. Nesse caso, podemos usar a seguinte sintaxe:

Após o prefixo attr, é especificado o nome do atributo.

Essa vinculação geralmente é usada com atributos de elementos aria, svg e table. Por exemplo, o atributo value de um campo de entrada também pode ser vinculado aos atributos:

import { Component } from "@angular/core";
      
@Component({
    selector: "my-app",
    standalone: true,
    template: `<input [attr.value]="text" />`
})
export class AppComponent{ 
    text="Hello Programício";
}

Aqui, o atributo value está vinculado à variável text.

Vinculação a Eventos

A vinculação a eventos permite associar um método do componente a um evento de um elemento:

import { Component } from "@angular/core";
      
@Component({
    selector: "my-app",
    standalone: true,
    template: `<p>Quantidade de cliques: {{count}}</p>
                <button (click)="increase()">Clique</button>`
})
export class AppComponent { 
    count: number = 0;
    
    increase(): void {
        this.count++;
    }
}

No template, temos um botão com um evento click. Para lidar com esse evento, o método increase() é definido na classe AppComponent, que incrementa a quantidade de cliques. Como resultado, ao clicar no botão, o método será acionado:

Como alternativa, a vinculação ao evento poderia ser configurada assim:

template: `<p>Quantidade de cliques: {{count}}</p>
           <button on-click="increase()">Clique</button>`

Após o prefixo on, é especificado o nome do evento.

Também podemos passar informações sobre o evento usando o objeto $event:

import { Component } from "@angular/core";
       
@Component({
    selector: "my-app",
    standalone: true,
    template: `<p>Quantidade de cliques: {{count}}</p>
                <button (click)="increase($event)">Clique</button>`
})
export class AppComponent { 
    count: number = 0;
    
    increase($event: any): void {
        this.count++;
        console.log($event);
    }
}

$event é um objeto embutido através do qual o Angular passa informações sobre o evento.

Vinculação Bidirecional

A vinculação bidirecional permite que mudanças em um lado da vinculação sejam refletidas dinamicamente no outro lado. Esse tipo de vinculação é comumente usado com elementos de entrada, como campos de texto. Por exemplo:

import { Component } from "@angular/core";
import { FormsModule } from '@angular/forms';
      
@Component({
    selector: "my-app",
    standalone: true,
    imports: [FormsModule],  // importando FormsModule para vinculação bidirecional
    template: `<p>Olá, {{name}}</p>
                <input type="text" [(ngModel)]="name" /> <br><br>
                <input type="text" [(ngModel)]="name" />`
})
export class AppComponent { 
    name = "Tom";
}

Aqui, a propriedade name da classe AppComponent está vinculada a três elementos: um parágrafo e dois campos de texto. Os campos de texto estão vinculados à propriedade name por meio de vinculação bidirecional, usando a sintaxe [(ngModel)]="expressão".

É importante notar que, para aplicar a vinculação bidirecional a campos de formulário, é necessário importar o módulo FormsModule no componente.

Como resultado, mudanças em um dos campos de texto serão refletidas no segundo campo de texto e no parágrafo:

Vinculação a Classes CSS

A vinculação a uma classe CSS segue a seguinte forma:

Após o prefixo class, é especificado o nome da classe que queremos adicionar ou remover. A vinculação depende de um valor booleano. Se for true, a classe é aplicada; se for false, a classe não é aplicada. Por exemplo:

import { Component } from "@angular/core";
import { FormsModule } from '@angular/forms';
        
@Component({
    selector: "my-app",
    standalone: true,
    imports: [FormsModule],
    template: `<div [class.redbox]="isRed"></div>
                <div [class.redbox]="!isRed"></div>
                <input type="checkbox" [(ngModel)]="isRed" />`,
    styles: [`
        div { width: 50px; height: 50px; border: 1px solid #ccc; }
        .redbox { background-color: red; }
    `]
})
export class AppComponent { 
    isRed = false;
}

Neste exemplo, a variável isRed está vinculada à classe redbox, que define a cor de fundo vermelha. No primeiro bloco div, a classe é aplicada se a variável tiver o valor true: [class.redbox]="isRed". No segundo bloco, a classe é aplicada se a variável tiver o valor false: [class.redbox]="!isRed". Usando a vinculação bidirecional à variável isRed no elemento checkbox, podemos alterar seu valor.

Vale notar que também podemos usar a vinculação de propriedades para definir a classe:

import { Component } from "@angular/core";
        
@Component({
    selector: "my-app",
    standalone: true,
    template: `<div [class]="red"></div>`,
    styles: [`
        div { width: 50px; height: 50px; border: 1px solid #ccc; }
        .redbox { background-color: red; }
    `]
})
export class AppComponent { 
    red = "redbox";
}

Vinculação de Estilos

A vinculação de estilos segue a sintaxe:

Após o prefixo style, o nome da propriedade de estilo é especificado. O valor é um expressão que, se retornar true, atribui o valor A à propriedade de estilo; se retornar false, atribui o valor B. Por exemplo:

import { Component } from "@angular/core";
import { FormsModule } from '@angular/forms';
        
@Component({
    selector: "my-app",
    standalone: true,
    imports: [FormsModule],
    template: `<div [style.backgroundColor]="isRed ? 'red' : 'green'"></div>
                <div [style.background-color]="!isRed ? 'red' : 'green'"></div>
                <input type="checkbox" [(ngModel)]="isRed" />`,
    styles: [`
        div { width: 50px; height: 50px; border: 1px solid #ccc; }
    `]
})
export class AppComponent { 
    isRed = false;
}

A expressão [style.backgroundColor]="isRed ? 'red' : 'green'" indica que, se a variável isRed for true, a propriedade de estilo background-color receberá a cor vermelha; caso contrário, receberá a cor verde. É possível usar tanto style.background-color quanto style.backgroundColor, substituindo o hífen pela versão em maiúsculo da letra seguinte.