Masterclass Angular 20 | Atualizado 2025

Cod3r Cursos•2025-10-25•1 hora 18 minutos•Iniciante a Intermediário (em Angular)
AngularAngular 20TypeScriptFront-endComponentesSignalsServices

Sobre este curso

Uma masterclass de Angular 20, onde você aprenderá na prática os conceitos fundamentais da framework, incluindo componentes, estado com signals, serviços e roteamento, construindo uma mini-aplicação.

Esta masterclass do canal Cod3r Cursos é focada em ensinar Angular 20 de forma prática [00:00:04]. A aula guia você na construção de uma mini-aplicação para explorar os conceitos centrais da framework [00:00:10], como a arquitetura de componentes e gerenciamento de estado.

O que você vai aprender

  • Setup: Configurar um projeto Angular 20 do zero, incluindo a instalação do Angular CLI [00:02:42] e integração com Tailwind CSS [00:03:40].
  • Componentes:
    • O conceito de componente no Angular (HTML, CSS, TS) [00:10:46].
    • Gerar componentes usando o Angular CLI (ng generate component) [00:07:55].
    • Criar um layout de página (Page Component) reutilizável [00:11:58].
    • Passar dados para componentes filhos usando @Input() [00:23:19].
  • Roteamento:
    • Configurar o roteamento de páginas (App Routes) [00:17:37].
    • Usar o <router-outlet> para renderizar as páginas [00:18:25].
    • Criar um componente de Menu com navegação (routerLink) [00:24:29].
  • Estado e Eventos:
    • Gerenciar o estado interno de um componente com signal() (exemplo do contador) [00:33:40].
    • Lidar com eventos de usuário, como (click), para alterar o estado [00:35:36].
  • Serviços:
    • Criar um serviço (TodoService) para gerenciar estado compartilhado [00:40:05].
    • Injetar (inject) e usar o serviço dentro dos componentes [00:44:49].
  • Persistência e Reatividade:
    • Usar effect() para reagir a mudanças em um signal e persistir dados no LocalStorage [01:15:15].
  • Renderização Condicional:
    • Usar a sintaxe @if para renderizar elementos condicionalmente [00:29:23].
  • Renderização de Listas:
    • Usar a sintaxe @for para iterar e renderizar listas [00:45:22].

Pré-requisitos

  • Conhecimento prévio em programação (HTML, CSS e JavaScript/TypeScript) [00:01:28].
  • Node.js e NPM instalados.

Para quem é este curso

Desenvolvedores que desejam aprender os fundamentos do Angular 20 ou se atualizar sobre as novas funcionalidades, como o uso de Signals para gerenciamento de estado.