Iniciando com Angular Material

Fala stakers!

O Angular Material é uma biblioteca de componentes que facilita em muito o seu uso. Existem muitos tipos de componentes que podemos usar deles, alguns exemplos do site como calendários, inputs, botões de switch, botões, sliders, ícones e muitos outros.

Vale frisar que ele permite a customização dos componentes e caso não tenha interesse em customizar, pode usar os pré-prontos também.

Motivo para usar o Material do Angular

Como ele é mantido pelo time do Google, sempre que o Angular é atualizado o Material também é atualizado, sendo assim a vantagem é muito grande, pois evita muitos erros e quebra de códigos, por não ser uma biblioteca externa.

Com apenas um código o Angular e o Material são atualizados juntos, evitando assim o esquecimento de atualizar um e não o outro.

O Google é muito cuidadoso com seus produtos, então todos os Materials disponíveis no site do Angular são testados e aprovados por todo o time.

E como instalar o Material do Angular?

Antes de tudo, nós devemos ter um projeto existente para fazer a instalação do Material, então vamos começar usando nosso velho conhecido CLI para isso.

Com o nosso projeto existente, agora é a hora do Material brilhar.

Quando rodarmos o código, ele irá fazer algumas perguntas de configuração, marque as que você acha mais interessantes para seu projeto.

Como utilizar o Materials?

Antes de tudo devemos fazer o import do modulo.

Um exemplo, vamos fazer o import de um material do tipo Button.

Os imports e códigos, podem ser obtidos diretamente do site do Material.

E como importar todos os Materials de uma vez?

Não existe bem uma maneira correta de fazer isso, pois não é possível que alguma aplicação irá utilizar tudo de uma vez. É muito custoso e irá consumir muita banda para isso.

Mas vamos lá, podemos fazer isso dentro do app.module.ts e fazer todos os imports dentro dele, mas eu acho que a maneira correta seria fazer o import dentro do modulo que precisarmos.

Lembrando eu não concordo colocar tudo de uma vez, porém é apenas uma poc para lhe apresentar!

Gostou? Quer aprender mais de angular? Então veja aqui nosso Curso de Angular.

Quer aprender mais de angular? Não se esqueça de acessar os nossos conteúdos do blog e do Youtube.

Share This