Dicas de Angular

Continuação do projeto com Angular 21: Integração com Alpha Vantage, HttpClient, Observable, Signals e criação do componente de gráfico de cotações.

Neste vídeo, damos continuidade ao projeto de uma aplicação em Angular 21 voltada para consulta ao mercado financeiro. O foco desta etapa é integrar a aplicação com uma API externa de ativos financeiros, entender o retorno dos dados e preparar a base para a exibição de gráficos de cotação.


Ao longo do vídeo, é apresentada a API Alpha Vantage, incluindo o processo para obtenção da API Key, análise da documentação e escolha do endpoint TIME_SERIES_MONTHLY para recuperar dados mensais de ativos. Também é mostrado como a estrutura de retorno da API pode fugir de padrões mais comuns de modelagem, exigindo tratamento específico dos dados.


Na implementação prática, o vídeo cobre:

- Criação de um service no Angular;
- Organização inicial da camada de serviços;
- Uso temporário de fetch para inspeção do retorno;
- Migração para o padrão recomendado com HttpClient;
- Transformação dos dados com RxJS, usando pipe e map;
- Tratamento de erros retornados pela API;
- Diferenças entre Promise e Observable;
- Consumo do Observable com subscribe;
- Criação de um componente Angular para o gráfico;
- Inserção do componente na página principal da aplicação


Além da parte prática, o vídeo também contextualiza características do Angular 21, especialmente o desenvolvimento mais reativo e a importância de recursos como Signals, dentro de uma abordagem moderna para aplicações frontend. Esta aula é ideal para quem deseja aprender a integrar Angular com APIs REST, manipular dados financeiros e estruturar uma aplicação preparada para dashboards e visualizações gráficas


## Conteúdos abordados
- Angular 21
- aplicação zoneless
- Signals
- integração com API REST
- Alpha Vantage
- API Key
- HttpClient
- RxJS
- Observable
- pipe e map
- tratamento de erros
- criação de service
- criação de component
- gráfico de cotação
- mercado financeiro

# Capítulos
00:00:00 Angular 21, aplicação zoneless e foco em Signals
00:01:45 Alpha Vantage - Como obter a API Key gratuita
00:03:10 Visão geral da documentação da API e Endpoint Time Series Monthly
00:05:44 Criando um service no Angular CLI
00:06:36 Boas práticas de organização de services
00:08:59 Configurando API Key e base URL
00:09:39 Criando o método getStockData (como Promise)
00:10:20 Utilização de Angular com fetch (Inspecionando o retorno da API)
00:11:48 Criando evento de clique na página
00:13:55 Injeção do FinanceService e chamada do método
00:15:03 Ajuste para método assíncrono com await
00:19:23 Migrando de fetch para HttpClient
00:20:24 Uso de pipe e map com RxJS
00:21:46 Uso de any e tratamento de erro da API
00:23:11 Promise vs Observable
00:23:24 Consumindo dados com subscribe
00:25:21 Criando componente reutilizável no Angular (para exibição de gráfico)
00:27:58 Inserindo o componente na página principal (selector, Importação automática)