Conhecendo o Angular Material

No mundo da programação há muitas ferramentas que auxiliam no processo do desenvolvimento de aplicações, hoje irei falar de uma delas que é usada junto com o Framework Angular, estou falando do Angular Material.

O Angular Material é uma biblioteca de componentes de interface de usuário, que ajuda no desenvolvimento de interfaces de usuário coesas e atraentes, utilizando componentes pré-projetados de acordo com as diretrizes do material design como: botões, menus, listas, tabelas, ícones, calendários entre outros.

Processo de instalação do Angular Material

Dica: se você não sabe como instalar o Angular CLI no seu computador recomendo esse artigo do João Octávio que explica melhor sobre os Primeiros passos no Angular.

1-  Criar um projeto Angular. (opcional)

Caso você tenha um projeto angular para instalar o Angular Material pule esse passo:

No seu terminal digite o comando: ng new nome-do-projeto

responda yes para as perguntas que aparecerem no seu terminal, escolha o formato do seu stylesheet preferido e aguarde o fim da instalação.

2- Instalando o Angular Material.

Dica: não deixe de conferir a documentação oficial do Angular Material

No seu terminal dentro do seu projeto digite o comando: ng add @angular/material

responda yes para as perguntas que aparecerem no seu terminal, escolha um tema entre as opções disponíveis ou um personalizado.

após isso vai perguntar se você deseja incluir o módulo Angular animations, selecione Include and enable animations

Aguarde o fim da instalação.

3- Utilizando o Angular Material.

Na documentação do Angular Material existem alguns exemplos de como utilizar o Angular Material no seu projeto, deixarei abaixo o link para os exemplos: Componentes do Angular Material.

Criando botões básicos com o Angular Material

No seu projeto procure o módulo no qual pertence ao componente que vc quer adicionar seu botão, no caso utilizaremos o app.module.ts

Adicione o import dos módulos de botões: MatButtonModule e o de ícones: MatIconModule do Angular Material.

Crie um botão no seu html:

Adicione a tag do Angular Material:

Adicione a cor primária do seu projeto ao seu botão (opcional):

No seu terminal digite o comando: ng serve

Está sera a aparência do seu botão:

Deixarei alguns exemplo de alguns tipos de botões de exemplo

No navegador:

No Html:

Como acabamos de ver, o Angular Material é uma poderosa biblioteca de componentes de interface de usuário que complementa o Framework Angular.

Abordamos sobre o processo de instalação e criação de botões simples utilizando os módulos de botões e ícones do Angular Material.

O Angular Material oferece uma ampla variedade de componentes de interface do usuário com base nas especificações do Material Design, se tornando uma ferramenta indispensável para aqueles que buscam otimizar o processo de desenvolvimento e oferecer uma experiência de usuário espetacular.

Essa ferramenta é capaz de ajudar no desenvolvimento de aplicações ao disponibilizar uma grande variedade de componentes para o desenvolvedor utilizar em seus projetos sem abrir mão da praticidade e profissionalismo.

Num cenário onde o design e a experiência do usuário desempenha um papel fundamental na criação de aplicações, o Angular Material surge como um aliado confiável para criar e desenvolver uma experiencia de usuário exemplar. Seja você um entusiasta no Angular ou um especialista, o Angular Material se destaca como uma ferramenta crucial para alcançar resultados extraordinários.

Bom estudo a todos!