0
Shares
0
0
0
0
0
0

Aplicações WEB atualmente precisam ser pensadas de forma a entregar a melhor experiência a todas as pessoas usuárias independentemente do dispositivo que estejam utilizando. Afinal, todas querem ter a atenção e elogios de quem a utiliza. 

Não é em todo projeto que é viável investir tempo e/ou dinheiro para planejar a responsividade, fluxos de navegação, padrão de cores, design e comportamentos diversos, principalmente se o prazo for curto.

Nesses pontos o Angular Material é muito indicado para projetos que precisam ser feitos num curto espaço de tempo. Fácil de instalar, fácil de utilizar e deixa sua aplicação com um design moderno, continue lendo para ver mais benefícios.

O que é Angular?

Angular é um framework front-end de código aberto criado e mantido pelo Google que as pessoas desenvolvedoras podem aproveitar para construir aplicações WEB responsivas, desktop e mobile. 

Utiliza das linguagens HTML e Typescript para criar a interface da aplicação no modelo Single-Page Application (SPA). Ou seja, toda a aplicação é carregada no momento que o usuário ou usuária acessa o site e somente as requisições AJAX são necessárias para carregar as informações na medida que vão navegando no sistema.

Ao utilizar Angular, o desenvolvimento segue a ideia de componentizar a interface. Cada pedacinho da interface, ou componente, é pensado de forma isolada para assim reaproveitarmos trechos de código sempre que precisarmos, sem necessitar reescrever ou copiar e colar toda vez que tal componente aparece.

O que é Angular Material?

Angular Material é uma biblioteca de componentes de interface (UI) já prontos, criada especificamente para o framework Angular com a finalidade de agilizar o desenvolvimento. Tais componentes são responsivos, ou seja, pensados para se adaptar aos diferentes tamanhos de tela: computadores, tablets e smartphones.

Recebe esse nome de “Material” pois é a implementação do Material Design, uma especificação de layout/design para as interfaces modernas do Google. Na biblioteca, encontramos diversos tipos de componentes, como: elementos de formulário, componentes de layout, botões, estilos de navegação, tabelas, modais, pop-ups, entre outras coisas.

Mais uma característica do Angular Material é ser extensível. É simples adicionar mais regras com CSS para implementar um novo recurso e personalizar o componente com sua preferência.

Por que e quando usar Angular Material?

O Angular Material é uma ferramenta pensada para facilitar e agilizar o trabalho do desenvolvedor ou desenvolvedora front-end que está usando Angular em um projeto. O uso da biblioteca, até mesmo de forma comercial, é gratuita (está sob licença MIT), possui componentes responsivos, auxilia para unificar o estilo e identidade visual de toda interface, extensível para adicionar recursos e personalização, tem suporte para vários browsers e possui uma fácil integração/instalação.

Fortemente indicado pela comunidade quando se trata de projetos não tão customizados ou quando não se tem muitas regras de negócio muito específicas, e principalmente se o time tem liberdade com o design e um prazo curto para entrega.

Instalação do Angular Material: o passo a passo!

Antes de tudo, é necessário instalar o NodeJS em sua máquina (recomendamos versão LTS). NodeJS pode ser rapidamente definido como um ambiente de execução de Javascript fora do navegador. Porém, não é bem no Node que estamos interessados. Na instalação, o seu computador vai baixar também o NPM, que é o gerenciador de pacotes oficial do Node. 

Agora que temos o NPM, podemos instalar o pacote do Angular CLI e esse pacote será o responsável por fazer toda configuração necessária para criar um projeto Angular e também de fazer a instalação do Angular Material dentro do projeto.

A seguir está o passo a passo da instalação do pacote Angular CLI até ter um projeto pronto com o Angular Material instalado:

  1. Instalação do Angular CLI de forma global:
npm install -g @angular/cli
  1. Criação de um projeto Angular:
ng new do-seu-projeto>

Você vai se deparar com algumas perguntas na hora de criar o projeto, fique a vontade para responder como quiser, abaixo mostro como fizemos:

Responder perguntas instalação Angular Material
  1. Instalação do Angular Material juntamente com demais dependências (mas não esqueça de antes navegar para dentro da pasta do projeto):
cd npm install @angular/material @angular/cdk @angular/animations
ng add @angular/material

Aguarde um instante e aqui você vai se deparar com mais outras escolhas. A primeira pergunta é em relação as cores do tema do Material, fique a vontade e escolha as cores que preferir, para as outras duas perguntas mostramos abaixo nossas preferências:

Escolhendo temas e respondendo perguntas Angular Material
  1. Execução do projeto Angular:

Nesse momento tudo já deveria estar funcionando, execute o comando abaixo e veja a aplicação em execução (por default a aplicação será executada na porta 4200).

ng serve
Tela de execução angular

Quais os componentes de navegação do Angular Material?

Para utilizar os componentes de navegação que serão apresentados a seguir, precisamos importar os respectivos módulos da biblioteca Angular Material, veja como o arquivo app.module.ts deve ficar:

import { MatToolbarModule } from '@angular/material/toolbar'; 

O componente de toolbar, ou barra de ferramentas, é um container muito utilizado nas interfaces do Google geralmente na parte de cima da página e serve para agrupar links, menus e títulos.

Para utilizá-lo, basta ir no arquivo app.component.html e escrever a tag . Tal componente apresenta uma variedade de estilos de acordo com as cores escolhidas para o tema (no atributo “color” atribua os valores: “primary”, “accent” ou “warn”).

Além disso, temos também a opção de renderizar com múltiplas linhas, os exemplos de código e uma representação visual estão a seguir:

Exemplo de Toolbar utilizando Angular Material
<mat-toolbar color="primary">
<span>Trybespan>
mat-toolbar>

<mat-toolbar color="accent">
<mat-toolbar-row>
  <span>Projeto Angularspan>
mat-toolbar-row>

<mat-toolbar-row class="toolbar-flex">
  <span>Angular Materialspan>
  <div>
    <button>
      Botão 1
    button>
    <button>
      Botão 2
    button>
  div>
mat-toolbar-row>
mat-toolbar>
.toolbar-flex{
display: flex;
justify-content: space-between;
}
import { MatMenuModule } from '@angular/material/menu'; 

Componente que facilita a criação de submenus no estilo dropdown, um painel flutuante que contém uma lista de opções, tais opções podem inclusive ser uma nova lista de opções e assim por diante. 

Sozinho o elemento não renderiza nada na tela, a ideia é ter, por exemplo, um botão que quando selecionado ativa o menu.

Menus e Submenus Angular



<mat-menu #menuPadrao="matMenu">
  
  
mat-menu>



<mat-menu #menuDeMenu="matMenu">
  
  
mat-menu>

<mat-menu #submenu1="matMenu">
  
  
mat-menu>

<mat-menu #submenu2="matMenu">
  
  
mat-menu>
import { MatSidenavModule } from '@angular/material/sidenav';

De certa forma, é até semelhante com o toolbar, capaz de agregar links e menus. Esse container lateral é muito utilizado em aplicações responsivas, geralmente ficando oculto de um dos lados da tela.

Para utilizar esse elemento precisamos ficar atentos às 3 tags: que é a estrutura do container em si, que representa o conteúdo principal do sidenav e que representa o conteúdo lateral adicionado.

Criando sidenavs
<mat-sidenav-container>
<mat-sidenav #menuSidenav mode="side">Conteúdo do sidenavmat-sidenav>
<mat-sidenav-content>
  Conteúdo principal
  
mat-sidenav-content>
mat-sidenav-container>

Quais os componentes para Ícones, Botões e Indicadores do Angular Material?

Para importar os componentes de ícones, botões e indicadores que serão apresentados a seguir, é necessário fazer a seguinte modificação no arquivo app.module.ts:

Importando componentes de ícones botões e indicadores

Icons: usando ícones no Angular Material!

import {MatIconModule} from '@angular/material/icon'

Para utilizarmos o componente de ícone é simples, basta declararmos o componente e dentro escrever o nome do ícone que desejamos, o utiliza ícones em SVG e não oferece suporte a ícones em formatos PNG ou JPG, por exemplo.

Existe um grande variedade de ícones, a seguir mostrarei apenas alguns exemplos:

ícones SVG
homemat-icon>
facemat-icon>
inputmat-icon>
labelmat-icon>
helpmat-icon>
reply allmat-icon>
sendmat-icon>
sortmat-icon>
starmat-icon>

Button: usando botões no Angular Material!

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

Os botões do material são os próprios botões nativos do HTML (a tag <button mat-button color='primary'>primary <button mat-button color='accent'>accent <button mat-button color='warn'>warn

<div class="container-buttons"> <button mat-raised-button> mat raised button <button mat-raised-button color='primary'>mat raised button primary <button mat-raised-button color='accent'>mat raised button accent <button mat-raised-button color='warn'>mat raised button warn
<div class="container-buttons"> <button mat-stroked-button> mat stroked button <button mat-stroked-button color='primary'>mat stroked button primary <button mat-stroked-button color='accent'>mat stroked button accent <button mat-stroked-button color='warn'>mat stroked button warn
<div class="container-buttons"> <button mat-fab color='primary'>fab <button mat-fab color='accent'>fab <button mat-fab color='warn'>fab 
.container-buttons{
display: block;
margin: 10px 0;
}
.container-buttons button{
margin: 0 10px;
}

Badges: usando selos e informações no Angular Material

import {MatBadgeModule} from '@angular/material/badge'

Você sabe o que são badges? São elementos pequenos, que geralmente apresentam um número e servem para descrever um status em sua interface. Por exemplo: indicar o número de notificações de um determinado app.

De forma semelhante ao botão, tal elemento não apresenta uma tag, ele vai ser uma diretiva que adicionamos a algum elemento html. É mais comum que badges apareçam no canto superior direito, mas isso pode ser editado, a seguir temos exemplos:

Botão com Badge, selos e informações


<button mat-raised-button color="primary" matBadge="2" matBadgeColor="accent">
Botão com Badge

message
<span matBadge="1" matBadgePosition="before">Texto com badge antes

button, span, mat-icon{
margin: 15px 10px 0 ;
}

Progress Bar: usando barras de progresso no Angular material!

import {MatProgressBarModule} from ‘@angular/material/progress-bar’
import {MatProgressBarModule} from '@angular/material/progress-bar'

A barra de progresso é uma barra horizontal que serve para preencher a tela enquanto algo está sendo carregado ou processado, também é uma forma de comunicação com a pessoa usuária, indicando que ela deve esperar.

A barra de progresso do Material é dada pela tag e apresenta 4 formas diferentes, abaixo os exemplos:

Exemplos de barra de progresso Angular
<mat-progress-bar mode="determinate" value="20">mat-progress-bar>
<mat-progress-bar mode="indeterminate" color="accent">mat-progress-bar>
<mat-progress-bar mode="buffer" color="warn">mat-progress-bar>
<mat-progress-bar mode="query">mat-progress-bar>


*{
margin: 10px 0;
}

Quais os componentes para Layout do Angular Material?

Como já é de costume, nesta seção precisamos adicionar os componentes de Card, List, Expansion Panel e o Tab no arquivo app.module.ts: 

Importando componentes do Layout do Angular Material

Card: separando conteúdos distintos em uma mesma tela!

import {MatCardModule} from '@angular/material/card'

O componente de Card é utilizado como um container que serve para limitar o conteúdo (texto, imagem, botão) de um mesmo item, que pode estar organizado em uma lista.

Tal componente já funciona em sua forma mais básica com a declaração de , mas veremos que ele pode ser bem mais elaborado com adição de suas seções pré definidas (, , , ):

Card Título, subtítulo e botão com Angular Material
<div class="container">
<mat-card>
  <mat-card-title>Títulomat-card-title>
  <mat-card-subtitle>Subtítulomat-card-subtitle>
  <mat-card-content>
    <span>Aqui é o content do cardspan>
  mat-card-content>
  <mat-card-actions>
    <button mat-raised-button color="primary">Botãobutton>
  mat-card-actions>
mat-card>
div>
.container{
margin: 20px;
width: 200px;
height: 200px;
}

List: organizando itens em lista!

import {MatListModule} from '@angular/material/list'

Esse elemento é um container que encapsula itens em uma lista mas não oferece comportamento próprio. Para fazer uma lista simples só precisamos declarar um e para cada item usar um . 

Mas além desse estilo mais básico, vamos apresentar abaixo como ter 1 item que ocupa mais de uma linha, como inserir divisores e como declarar uma lista de “options”:

Organizando em litsas


<mat-list>
<mat-list-item>
  Item 1
mat-list-item>
<mat-divider>mat-divider>
<mat-list-item>
  Item 2
mat-list-item>
<mat-divider>mat-divider>
<mat-list-item>
  mat-line>
    item 3 com botão
  
  
mat-list-item>
<mat-divider>mat-divider>
mat-list>
<mat-selection-list>
<mat-list-option>
  opção 1
mat-list-option>
<mat-list-option>
  opção 2
mat-list-option>
mat-selection-list>

Expansion Panel: exibindo informações quando o usuário clica!


import {MatExpansionModule} from '@angular/material/expansion

Elemento fornece um cabeçalho, com título e descrição, e um conteúdo expansível que esconde mais detalhes sobre o tópico. Por padrão, já temos a presença do ícone de “setinha” ao lado direito da barra.

Temos algumas customizações disponíveis, como: desabilitar o expansor, carregamento lazy do conteúdo dentro do expansor e habilitar que somente um expansor seja aberto por vez. A seguir, alguns exemplos:

Painel Expansor com Angular Material
<mat-expansion-panel>
<mat-expansion-panel-header>
  <mat-panel-title>
    Título
  mat-panel-title>
  <mat-panel-description>
    Descrição
  mat-panel-description>
mat-expansion-panel-header>

Conteúdo do expansor

mat-expansion-panel>

<mat-expansion-panel disabled hideToggle>
<mat-expansion-panel-header>
  <mat-panel-title>
    Título 2
  mat-panel-title>
  <mat-panel-description>
    Descrição 2
  mat-panel-description>
mat-expansion-panel-header>

Conteúdo do expansor 2

mat-expansion-panel>

 

Tabs: organizando conteúdos em diferentes abas!

import {MatTabsModule} from '@angular/material/tabs'

Os Tabs fornecem uma navegação em abas para a pessoa ver o conteúdo de uma página por vez, esse estilo de navegação destaca a aba que está selecionada e lista as outras ao lado.

Declaramos as abas com e para cada conteúdo usamos , com essa última tag nós especificamos tanto a página como também a aba no menu. 

É válido destacar que podemos customizar com carregamento lazy, capturar eventos, mudar alinhamento das abas e controlar a animação. 

Organizando Abas
<mat-tab-group>
<mat-tab label="Aba 1">
  Conteúdo 1
mat-tab>
<mat-tab label="Aba 2">
  Conteúdo 2
mat-tab>
<mat-tab label="Aba 3">
  Conteúdo 3
mat-tab>
mat-tab-group>

Quais as vantagens e desvantagens do Angular Material?

Vantagens

  • Design com padrão responsivo;
  • Pensado para criar componentes reutilizáveis;
  • Fácil instalação no projeto;
  • Fácil de utilizar, aumentando assim a produtividade;
  • Fácil de customizar componentes, adição de css personalizado;
  • Está atualizado com as versões mais recentes de UI padrão do Google

Desvantagens

  • Curva de aprendizado alta para usar os componentes, já que não utiliza o próprio HTML;
  • Só é utilizado em projetos Angular;
  • Não recomendado para componentes com layouts e comportamentos muito específicos, que venham a mudar muito o padrão da biblioteca

Quais as diferenças entre Angular Material e Bootstrap?

Inicialmente, vamos introduzir o que é Bootstrap: Bootstrap é um framework WEB open source de CSS para desenvolvimento de componentes de interface utilizando HTML, CSS e Javascript, que também se preocupa com a responsividade, se adaptando aos diferentes tamanhos de tela.

O intuito dessa comparação não é classificar qual é o melhor ou o pior, é apenas destacar alguns pontos para você entender as diferenças. A decisão de escolha entre eles varia muito de acordo com o gosto pessoal e cenário de cada time e projeto. Saiba que inclusive ambos podem ser usados juntos. Vamos à comparação:

Angular MaterialBootstrap
UsoUsado especificamente com AngularPode ser utilizado com várias bibliotecas (Angular, React, Vue, etc)
ResponsividadeSim, apresenta experiência da pessoa usuária aprimoradaSim, desenvolvido com o conceito de mobile-first
Empresa GoogleTwitter
CoresOferece as cores de acordo com o tema definido na instalação: Primary, Basic, Warn, Accent, Link e DisabledAo todo tem oito opções de cores: Primary, Secondary, Danger, Success, Dark, Info, Link and Warning
FormuláriosOferece campos de maior controle dos dados, por exemplo: seletor de data, controle deslizante e campo de preenchimento automáticoPrioriza personalização nos diferentes dispositivos e navegadores para obter mais estabilidade
ModaisO próprio componente de Dialog é usado para gerenciar e editar os dadosApresentam modais com comportamento através de JQuery, leves, responsivos e personalizáveis
Alguns componentes exclusivosSlider, Snackbar, Icon, Datepicker, Slide toggle, Grid list, Toolbar, Stepper, Sort header, Chips, Progress spinner Breadcrumb, Carousel, Alert, Scrollspy, Popovers, Jumbotron

Como foi apresentado, o Angular Material apresenta alguns componentes bem interessantes e úteis para criação da maior parte dos tipos de sites, e esses são só alguns exemplos. Não necessariamente os projetos Angular precisam usar o Material Design, mas se por acaso tiver essa liberdade, por que não escolher algo mantido pelo Google?

Essa biblioteca que já é bastante utilizada pela comunidade vai agregar ao projeto em questão de design, responsividade, componentes e assim as pessoas desenvolvedoras podem dar o maior foco em implementar as regras de negócio.

Se interessa pelo conteúdo de desenvolvimento web? E além disso se preocupa com o desenvolvimento da interface e experiência do usuário? Você pode se interessar também pelo conteúdo sobre Web Design!