Como usar o Angular Material

em
Como usar o Angular Material


O Angular Material é uma biblioteca para a construção de interfaces de usuário na framework Angular, que utiliza o Material Design do Google e possui diversos componentes poderosos que agilizam bastante o desenvolvimento. Esta biblioteca oferece grande capacidade de reuso de código e customização, assim como facilidade de instalação e uso de seus componentes.

Para começar, é preciso que você já tenha criado um projeto em Angular, é claro. Depois disso, abra o terminal na pasta do seu projeto Angular e rode o comando de instalação do Angular Material:

ng add @angular/material

O comando ng add vai instalar o Angular Material, Component Dev Kit (CDK), Angular Animations e vai perguntar a você que outras features você quer que sejam incluídas em seu projeto:

Para ter um projeto ainda mais elegante, você pode também adicionar nele a biblioteca Material Icons, uma biblioteca rica em ícones para deixar seu projeto ainda melhor! Você pode fazer isso simplesmente editando o index.html adicionando a tag link que se segue:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Usando os componentes

Para mostrar um componente na tela, é preciso fazer a importação do mesmo, dentro do arquivo app.module.ts. Vamos, por exemplo, para adicionar um botão, adicione a sua respectiva importação ao arquivo citado:

import {MatButtonModule} from '@angular/material/button';

@NgModule ({
  imports: [
    MatButtonModule,
  ]
})
class AppModule {}

E no componente, por exemplo no app.component.html:

<button mat-button color="primary">Primary</button>

Na documentação do Angular Material, há a descrição exata de como funciona e uso de cada componente disponível, o que nos permite facilmente consumir o conteúdo presente nela. Se você tiver alguma sugestão, deixe-a nos comentários abaixo ou nos comentários em algum vídeo do meu canal do YouTube. Obrigado por ler.

Comentários

Postar um comentário