Dicas de Angular

Aprenda a dar comportamento à página, usando Signals, @for, tratamento de erros, inputs e gráfico financeiro com Chart.js e ng2-charts

Nesta aula, continuamos a construção de uma aplicação Angular 21 para consulta de ativos do mercado financeiro usando a API da Alpha Vantage. O foco desta terceira parte é transformar a interface em algo realmente dinâmico: saímos do conteúdo hardcoded e passamos a implementar o comportamento da página principal, trabalhando com recursos modernos do Angular como Signals, templates com @for e @if, ngModel, inputs entre componentes e tratamento de erros.

Além disso, o vídeo mostra como integrar bibliotecas de gráficos para exibir os dados recebidos da API em uma visualização mais útil, usando Chart.js junto com ng2-charts

## O que você vai ver nesta aula

- Uso de Signals para reatividade no Angular 21
- Substituição de dados fixos por dados dinâmicos
- Preenchimento de select com lista de ativos
- Controle de item selecionado com ngModel
- Uso da nova sintaxe de templates com @for e @if
- Habilitação e desabilitação de botão com base no estado da tela
- Chamada da API com Observable
- Conversão com lastValueFrom
- Implementação de tratamento de erro com try/catch
- Exibição de mensagem amigável de erro na interface
- Envio de dados do componente principal para o componente de gráfico com input
- Atualização do gráfico quando os dados mudam com ngOnChanges
- Instalação e configuração de Chart.js e ng2-charts
- Montagem de gráfico de linha com dados reais do mercado financeiro

## Tecnologias e conceitos abordados

- Angular 21
- TypeScript
- Signals
- Components
- Input Signal
- ngModel
- FormsModule
- @for
- @if
- Observable
- lastValueFrom
- Chart.js
- ng2-charts
- Alpha Vantage API

Este conteúdo é ideal para quem quer praticar Angular moderno, integração com APIs externas e visualização de dados com gráficos em aplicações SPA

# Índice de capítulos

00:00:00 Datando comportamento para a página
00:01:18 Análise da interface e uso inicial de Signals
00:03:13 Definindo o que precisa ser dinâmico na página
00:03:32 Definindo vairáveis para Binding ngMOdel com a página
00:04:41 Ligando o select ao template com ngModel Binding
00:05:21 Importando FormsModule e ajustando propriedades públicas
00:06:13 Migrando de ngFor para @for no Angular 21
00:09:13 Testando a chamada da API Alpha Vantage com DevTools
00:10:22 Refatorando a chamada com lastValueFrom
00:11:53 Implementando try/catch e tratamento de erro
00:13:52 Exibindo mensagem de erro na interface com @if
00:15:38 Codificando componente Angular para gráfico (Chart.js e ng2-charts)
00:18:04 Instalando Chart.js e ng2-charts
00:19:03 Criando input para receber dados no componente (tradicional e com Signal)
00:20:49 Detectando mudanças com ngOnChanges
00:21:49 Passando signal entre componentes
00:24:35 Preparando datasets e labels do gráfico Chart.js e ng2-charts)
00:27:43 Montando o template do gráfico com baseChart (Chart.js e ng2-charts)
00:28:37 Importando BaseChartDirective (Chart.js e ng2-charts)
00:29:05 Registrando componentes do Chart.js