Componentes e Templates

@Component, decorator e interpolação

Angular é um framework completo de TypeScript para construir aplicações web complexas. Diferente do React (biblioteca), Angular opina sobre tudo: roteamento, formulários, HTTP, injeção de dependência. Isso o torna ideal para grandes times e aplicações enterprise.

Um componente Angular é uma classe TypeScript decorada com @Component, que configura o seletor (a tag HTML customizada), o arquivo de template HTML e o arquivo de estilos. A propriedade selector define como o componente será usado: selector: "app-cabecalho" → <app-cabecalho></app-cabecalho> no HTML.

Interpolação {{ expressão }} é a forma mais simples de binding: exibe o resultado de uma expressão TypeScript no template. Property binding [propriedade]="expressão" define atributos dinamicamente. Event binding (evento)="handler()" conecta eventos DOM a métodos da classe.

Exemplo.java

// ── Componente Angular completo ───────────────────
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-perfil',
  template: `
    <div class="perfil">
      <!-- Interpolação: exibe valor da propriedade -->
      <h1>{{ titulo }}</h1>
      <p>Olá, {{ usuario.nome }}! Você tem {{ mensagens }} mensagens.</p>

      <!-- Property binding: define atributo dinamicamente -->
      <img [src]="usuario.avatar" [alt]="usuario.nome" />

      <!-- Event binding: chama método ao clicar -->
      <button (click)="entrar()" [disabled]="carregando">
        {{ carregando ? 'Aguarde...' : 'Entrar' }}
      </button>

      <!-- Two-way binding: sincroniza input e propriedade -->
      <input [(ngModel)]="busca" placeholder="Pesquisar..." />
      <p>Buscando por: {{ busca }}</p>
    </div>
  `,
})
export class PerfilComponent implements OnInit {
  titulo = 'Meu Perfil';
  carregando = false;
  busca = '';
  mensagens = 0;
  usuario = { nome: 'Ana', avatar: '/foto.jpg' };

  ngOnInit(): void {
    // Ciclo de vida: chamado após o componente inicializar
    this.mensagens = 5;
  }

  entrar(): void {
    this.carregando = true;
    setTimeout(() => (this.carregando = false), 2000);
  }
}

💡 Dica pro

Angular usa Change Detection para atualizar a view automaticamente quando propriedades mudam. Para performance em listas grandes, use ChangeDetectionStrategy.OnPush — o componente só atualiza quando recebe novos inputs por referência.

Recompensa+30 XP+exercícios