Nessa aula vamos começar a introduzir componentes visuais e vamos organizar nossa aplicação em páginas e componentes, vamos utilizar uma biblioteca chamada Angular Material para criar componentes visualmente atrativos.
Nosso foco será mais nas funcionalidades do que no design, portanto não vamos entrar em detalhes e nem será o objetivo ter um aplicativo que siga os recursos de design de aplicações modernas, deixamos esse exercício para o aluno, isso envolve mais habilidades com css e html. Se o aluno quiser pode adicionar um framework como o bootstrap ou outro para fazer o layout das páginas.
O angular material é um conjunto de componentes feitos em Angular, para se trabalhar com sistema web. Servirá de base para o nosso assunto principal que é formulários, mais tarde iremos utilizar os componentes do Ionic para refazer nosso cadastro e ter um visual de aplicativo mobile, os conceitos serão bem parecidos.
Crie um novo aplicativo angular…
<aside> <img src="/icons/thought-alert_red.svg" alt="/icons/thought-alert_red.svg" width="40px" /> Lembrando: Para criar um novo aplicativo Angular, primeiramente acesse o seu diretório de projetos via terminal e utilize os comandos abaixo:
# Abre a pasta Projetos
cd Projetos
# Caso você esteja no diretório do projeto da aula anterior
# Use esse comando para acessar sua pasta raiz Projetos:
cd ..
# Inicia o novo projeto Angular
ng new nome-do-seu-app
Você irá responder algumas perguntas:
# Você gostaria de adicionar o roteamento Angular? Selecione Yes
? Would you like to add Angular routing? Yes
# Qual estilo de CSS você gostaria de usar? Selecione CSS
? Which stylesheet format would you like to use? CSS
Para acessar o diretório basta utilizar:
cd nome-do-seu-app
# Para rodar o seu app:
npm run start
</aside>
… e adicione a biblioteca do Angular Material, rodando o comando:
#Para as aulas instalar a versão 15.2.6
ng add @angular/[email protected]
Isso irá rodar o que chamamos de schematic, que é uma forma do angular de ir além da simples adição de dependências e fornecer atrás do angular cli uma configuração para uma extensão do angular. Selecione um tema e diga sim para ter a typografia. Para animações tanto faz a escolha, pode deixar habilitado se quiser. Vamos separar nosso aplicativo em duas páginas, home e cadastro de pessoas. Teremos dois componentes: o componente header e o componente de formulário de pessoas. Iremos navegar usando as rotas do angular entre as páginas.
Existem dois estilos para se criar formulários em Angular:
Template Driven – Formulários orientados a template são feitos usando o binding the informações diretamente em objetos com a ajuda do [(ngModel)], a validação de formulários orientados a template pode ser feita de forma mais manual.
Reactive Forms – Os formulários reativos são a forma mais indicada de se criar formulário em angular pois permitem validações avançadas com a combinação de múltiplas validações em um mesmo componente, eles não utilizam o [(ngModel)], mas sim uma forma declarativa de fazer o binding dos controles do form para uma classe de FormGroup que dá mais recursos ao usuário. A maioria das bibliotecas de interface com usuário em angular suportam o uso de formulários reativos.
Nessa primeira parte vamos criar um formulário template driven, em módulos posteriores vamos ver como criar formulários reativos.
Componente Header e página Home
Para começar vamos fazer um cabeçalho (menu), criar uma página home e depois fazer a navegação entre a home e o formulário pelo menu principal.
Crie uma pasta components dentro da pasta app e adicione os arquivos:
header.component.html
header.component.ts