Templates Angular: interpolação e property binding

Rocketseat

2 min de leitura

Navegação Rápida:

Interpolação ({{ }})

Property Binding ([ ])

Classes e estilos dinâmicos

Introdução a pipes

Conclusão + próximos passos

Interpolação ({{ }})

Expressões seguras no template

Interpolação é a forma mais direta de exibir valores do componente no template. O Angular avalia expressões de forma segura, sem executar nada perigoso (ex.: não roda funções globais arbitrárias).

Pense nos templates Angular como uma camada declarativa: você descreve o que quer ver e o framework cuida do resto.


// profile.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-profile',
  standalone: true,
  templateUrl: './profile.component.html'
})
export class ProfileComponent {
  user = {
    nome: 'Isabela',
    avatar: 'assets/isa.png',
    ativo: true,
    criadoEm: new Date(),
    seguidores: 1287,
  };

  // Evite lógica pesada no template
  get saudacao(): string {
    return this.user.ativo ? `Bem-vinda, ${this.user.nome}!` : `Conta de ${this.user.nome} está inativa`;
  }
}


<!-- profile.component.html -->
<h2>{{ saudacao }}</h2>
<p>Total de seguidores: {{ user.seguidores }}</p>

Procure manter o template limpo. Cálculos, formatações complexas e regras de negócio ficam no TypeScript.

Boas práticas

Prefira getters ou métodos simples e puros para valores derivados.

Evite encadear chamadas pesadas ({{ listaFiltrada().map(...) }}) — isso atrapalha performance e legibilidade.

Centralize formatações mais elaboradas em pipes ou no componente.

Property Binding ([ ])

Atributos vs propriedades

No Angular, property binding usa propriedades do DOM, não apenas atributos de HTML. Pra atributos que não possuem propriedade correspondente, use o prefixo attr..


<!-- Propriedades reais do elemento -->
<img
  [src]="user.avatar"
  [alt]="'Avatar de ' + user.nome + ' — templates Angular'"
/>

<!-- Atributos ARIA: use attr. quando não existir propriedade DOM equivalente -->
<button
  [disabled]="!user.ativo"
  [attr.aria-label]="'Seguir ' + user.nome"
  [attr.aria-live]="'polite'"
>
  Seguir
</button>

Dica: src, value, checked e disabled são propriedades; já alguns ARIA e role entram como atributos ([attr.aria-*], [attr.role]).

Acessibilidade: aria-* e estados

Acessibilidade é parte da experiência real. Combine estado da aplicação com ARIA para comunicar mudanças:


<nav>
  <a [attr.aria-current]="isHome ? 'page' : null" routerLink="/">Início</a>
  <a [attr.aria-current]="isDevs ? 'page' : null" routerLink="/devs">Devs</a>
</nav>


// header.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-header',
  standalone: true,
  templateUrl: './header.component.html'
})
export class HeaderComponent {
  isHome = true;
  isDevs = false;
}

Classes e estilos dinâmicos

[class.active] e [ngClass]

Estados visuais claros melhoram a leitura da interface e a vida de quem desenvolve.


<!-- Ativa/desativa classe com boolean -->
<button [class.inativo]="!user.ativo">Seguir</button>

<!-- Várias classes condicionais com ngClass -->
<li
  [ngClass]="{
    ativo: user.ativo,
    destaque: user.seguidores > 1000
  }"
>
  {{ user.nome }}
</li>

Organização visual consistente reduz retrabalho. Defina utilitários (ex.: .inativo, .destaque) e padronize.

[style.color] e [ngStyle]

Pra estilos dinâmicos granulares, use [style.*] ou ngStyle.


<!-- Propriedade de estilo direta -->
<p [style.color]="user.ativo ? '#16a34a' : '#9ca3af'">
  Status: {{ user.ativo ? 'Ativa' : 'Inativa' }}
</p>

<!-- Vários estilos de uma vez -->
<div
  [ngStyle]="{
    'border-color': user.ativo ? '#16a34a' : '#9ca3af',
    'border-width.px': 2,
    'border-style': 'solid'
  }"
>
  Card de {{ user.nome }}
</div>

🚀

Quer ir além com comunicação entre componentes? Dá uma olhada no nosso 📄 Guia Prático Angular – Comunicação Entre Componentes. Ele conecta o que você viu aqui com a troca de dados entre pai/filho — um passo natural pra evoluir a arquitetura.

Introdução a pipes

date, uppercase e criação futura de pipes

pipes deixam o template mais legível ao formatar valores na prática. Para standalone components, importe CommonModule quando necessário.


// profile.component.ts (versão com CommonModule para pipes comuns)
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-profile',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './profile.component.html'
})
export class ProfileComponent {
  user = {
    nome: 'Isabela',
    avatar: 'assets/isa.png',
    ativo: true,
    criadoEm: new Date()
  };
}


<!-- profile.component.html -->
<h2>Olá, {{ user.nome }}!</h2>
<img
  [src]="user.avatar"
  [alt]="'Avatar de ' + user.nome + ' — templates Angular'"
  [class.inativo]="!user.ativo"
/>
<button [disabled]="!user.ativo">Seguir</button>

<p>
  Criado em:
  {{ user.criadoEm | date:'shortDate' | uppercase }}
</p>

Futuro próximo: quando precisar de formatações muito específicas (ex.: currency customizada, máscaras ou i18n avançado), crie pipes próprios e mantenha o template enxuto.

Conclusão + próximos passos

Você viu como templates Angular organizam a renderização de dados com interpolação, property binding e estados visuais via classes e estilos, além de formatar valores com pipes. Esse conteúdo prepara o terreno para reagir a interações dos usuários. O próximo passo natural é ouvir cliques, teclas e submissões, conectando eventos à lógica da aplicação.

Em nosso próximo post, seguimos com Gerenciando Eventos no Angular, onde vamos ligar as ações de quem usa seu app aos comportamentos do componente. Bora?

Artigos_

Explore conteúdos relacionados

Descubra mais artigos que complementam seu aprendizado e expandem seu conhecimento.

Angular