Por que eu devo ler este artigo: Para entender esse artigo é importante que você já tenha experiência com a criação de componentes com o Angular, já que o artigo foca no desenvolvimento utilizando o Angular Material, uma biblioteca de componentes para o Angular.

Quando construímos interfaces com o Angular criamos componentes para cada uma das partes dessa interface, de forma que possamos aproveitá-los em outras partes da aplicação sem repetição de código. Essa prática aumenta a manutenibilidade do código e agiliza o desenvolvimento, uma vez que não precisamos criar essas partes do zero cada vez que eles aparecem.


Guia do artigo:

Uma forma de saber se sua interface está bem componentizada é calcular o número de vezes que você precisou copiar e colar código. Se o número de vezes for maior que zero, alguma coisa pode ser melhorada. Isso porque, se uma parte da interface aparece mais de uma vez, esta deveria ser um componente.

Quando levamos a prática de componentização e reaproveitamento ao extremo chegamos a bibliotecas de componentes prontas. Essas bibliotecas fornecem elementos visuais e comportamentos padrão, que podemos importar para a nossa aplicação e utilizá-los, sem precisarmos nos preocuparmos com templates HTML e estilos CSS. No Universo Angular, uma das bibliotecas mais utilizadas é o Angular Material.

O Angular Material é a implementação oficial, para o Angular, do Material Design, a especificação de design para interfaces interativas do Google. O Material Design cobre desde pequenos elementos, como ícones e cores, até elementos maiores como navegação, cards, imagens e muito mais.

Nesse artigo, separamos os componentes do Angular Material em três categorias:

  • Navegação
  • Ícones, botões e indicadores
  • Layout

Instalando e configurando o Angular Material

Para que possamos utilizar o Angular Material precisaremos, obviamente, de uma aplicação Angular. Precisaremos, também, de um ambiente de desenvolvimento Angular configurado. Caso você ainda não tenha experiência com o Angular, recomendo dar uma olhada no artigo de preparação do ambiente de desenvolvimento Angular e na série de primeiros passos no Angular:

Utilizando o npm, o gerenciador de pacotes do NodeJS, que instalamos no artigo de preparação do ambiente, instalaremos três pacotes: os componentes do Angular Material, o CDK e as animações da biblioteca.

O Angular Material CDK, ou Component Dev Kit, é um conjunto de componentes, dentro do Angular Material, que implementa comportamentos comuns como Drag and Drop, sem opinar quanto a aparência dos elementos visuais que serão utilizados em conjunto com esses comportamentos. Podemos, então, criar Drag and Drop com imagens, texto ou qualquer outro componente.

Para instalar esses pacotes, basta executar o seguinte comando no diretório da aplicação:

npm install --save @angular/material @angular/cdk @angular/animations
Listagem 1. NOME

Com os pacotes instalados, precisaremos importar o módulo de animações, utilizado internamente pelo Angular Material essencial para o funcionamento correto dos componentes, para dentro da nossa aplicação. Para isso, no arquivo app.modules.ts, basta adicionar o módulo de animações ao array de imports:

import  from '@angular/platform-browser/animations';


@NgModule({

...

imports: [

  ...

  BrowserAnimationsModule

  ...

],

...

})

export class AppModule { }

Cada componente do Angular Material possui seu próprio módulo. Dessa forma, sempre que precisarmos utilizar um componente, precisaremos adicioná-lo ao array de imports do arquivo app.module.ts, como veremos mais adiante.

Todos os módulos do Angular Material devem ser importados após o módulo BrowserModule, que acompanha toda aplicação Angular. Nesse caso, a ordem importa.

O próximo passo é adicionar um tema do Material Design à nossa aplicação. Isso pode ser feito através da importação do tema .css para dentro do arquivo styles.css da nossa aplicação. Atualmente, o Angular Material conta com quatro temas prontos:

  • deeppurple-amber.css
  • indigo-pink.css
  • pink-bluegrey.css
  • purple-green.css

Para um deles, no arquivo styles.css, adicionamos a seguinte linha ao topo do arquivo:


@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

Para adicionar outro tema, basta substituir deeppurple-ambar.css por outro dos listados mais acima.

Alguns componentes, tais como mat-slide-toggle, mat-slider e matTooltip, dependem do Hammer.js, uma biblioteca JavaScript para a captura de gestos como cliques e toques, para funcionar. Basta instalá-lo utilizando o NPM:

npm install --save hammerjs
Listagem 1. NOME

Por último, basta adicionar o pacote de ícones do Material Design. Para isso, adicione a importação do arquivo index.html da sua aplicação:

Componentes de navegação

O Angular Material fornece três componentes muito utilizados em qualquer aplicação: toolbar, menu e sidenav. O primeiro, toolbar, se trata de um contêiner para títulos, cabeçalhos e botões. O segundo, menu, permite a criação de menus e submenus dropdown. O último, sidenav, se trata de um menu lateral muito utilizado em interfaces responsivas e aplicativos mobile.

Toolbar

O componente toolbar permite agruparmos links, menus e títulos em uma barra de ferramentas, normalmente localizada no topo da aplicação:

Toolbar
Figura 1. Toolbar simples com Angular Material

O primeiro primeiro passo para utilizarmos o componente de toolbar é importar seu módulo para dentro do módulo da nossa aplicação, no arquivo app.module.ts:

import  from '@angular/material/toolbar';


@NgModule({

...

imports: [

  ...

  MatToolbarModule

  ...

],

...

})

export class AppModule { }

Feito isso, podemos utilizá-lo em qualquer template da aplicação através do seletor mat-toolbar:

<mat-toolbar>

<h1>Conteúdo do toolbar!</h1>

</mat-toolbar>

O componente permite alterar a paleta de cores do toolbar para primary, accent ou warn. A cor do fundo e do texto será escolhida de acordo com o tema que você escolheu para sua aplicação:

Toolbar de diversas cores com Angular Material
Figura 2. Toolbar de diversas cores com Angular Material

Para mudarmos a cor do toolbar, basta passar, para o atributo color, o nome da paleta de cores que desejamos utilizar:


<mat-toolbar color="primary">

<h1>Toolbar na cor <strong>primary</strong>!</h1>

</mat-toolbar>


<mat-toolbar color="accent">

<h1>Toolbar na cor <strong>primary</strong>!</h1>

</mat-toolbar>


<mat-toolbar color="warn">

<h1>Toolbar na cor <strong>primary</strong>!</h1>

</mat-toolbar>

Podemos, ainda, criar toolbars com múltiplas tuplas:

Toolbar de diversos níveis com Angular Material
Figura 3. Toolbar de diversos níveis com Angular Material

Para criarmos uma toolbar com múltiplas tuplas podemos utilizar outro componente, chamado mat-toolbar-row:

<mat-toolbar>

<mat-toolbar-row><strong>Primeira</strong> linha da toolbar.</mat-toolbar-row>

<mat-toolbar-row><strong>Segunda</strong> linha da toolbar.</mat-toolbar-row>

<mat-toolbar-row><strong>Terceira</strong> linha da toolbar.</mat-toolbar-row>

</mat-toolbar>

Com o componente Menu podemos criar menus do tipo dropdown com links e submenus. Em sua forma mais básica, um menu dropdown é composto de um botão que, ao ser clicado, abre uma aba com outros dois botões:

Menu dropdown com Angular Material
Figura 4. Menu dropdown com Angular Material

Para utilizar esse componente precisaremos, antes, importar seu módulo para dentro do módulo da aplicação:

import  from '@angular/material/menu;


@NgModule({

...

imports: [

  ...

  MatMenuModule

  ...

],

...

})

export class AppModule { }

Criamos um template utilizando o componente mat-menu e o atribuímos a uma variável local chamada #meuMenu. No botão, utilizando a diretiva matMenuTriggerFor, indicamos qual template deve ser carregado quando o botão for clicado. No caso, o template meuMenu. O resultado, no navegador, será este:

<button [matMenuTriggerFor]="meuMenu">Menu</button>

<mat-menu #meuMenu="matMenu">

<button mat-menu-item>Item 1</button>

<button mat-menu-item>Item 2</button>

</mat-menu>

Podemos criar submenus para os botões do submenu, gerado um menu dropdown onde cada opção leva a outras opções:

Menu dropdown com submenus com Angular Material
Figura 5. Menu dropdown com submenus com Angular Material

Assim como no exemplo anterior, criamos templates para cada um dos submenus e os atribuímos a variáveis locais:

<button [matMenuTriggerFor]="menuComSubmenu"Mega menu</button>

<mat-menu #menuComSubmenu="matMenu">

<button mat-menu-item [matMenuTriggerFor]="submenu1">Submenu 1</button>

<button mat-menu-item [matMenuTriggerFor]="submenu2">Submenu 2</button>

</mat-menu>


<mat-menu #submenu1="matMenu">

<button mat-menu-item>Item 1</button>

<button mat-menu-item>Item 2</button>

</mat-menu>


<mat-menu #submenu2="matMenu">

<button mat-menu-item>Item 1</button>

<button mat-menu-item>Item 2</button>

<button mat-menu-item>Item 3</button>

<button mat-menu-item>Item 4</button>

</mat-menu>


Mais para frente veremos como o elemento button pode ser estilizado para seguir o padrão visual do Material Design.

Sidenav

Um dos elementos mais utilizados em aplicações que seguem o Material Design é a sidenav. Uma sidenav é uma barra lateral que pode agrupar menus, links ou qualquer outra informação útil para o usuário:

Sidenav com Angular Material
Figura 6. Sidenav com Angular Material

Para utilizarmos a sidenav, precisaremos importar seu módulo para dentro do módulo da aplicação:

import  from '@angular/material/sidenav;



@NgModule({

...

imports: [

  ...

  MatSidenavModule

  ...

],

...

})

export class AppModule { }

Em sua forma mais simples, a sidenav é composta da barra lateral fixa e uma área, também fixa, para o conteúdo da página, conforme visto na imagem figura 6. Para implementarmos essa sidenav, podemos utilizar o componente mat-sidenav-container, mat-sidenav, que receberá o conteúdo da sidenav e mat-sidenav-content, que receberá o conteúdo principal da página:

<mat-sidenav-container>

<mat-sidenav mode="side" opened>Conteúdo da sidenav</mat-sidenav>

<mat-sidenav-content>Conteúdo da página</mat-sidenav-content>

</mat-sidenav-container>

Normalmente, quando utilizamos uma sidebar, a mesma fica oculta até que o usuário clique em um botão ou realize qualquer outra ação:

Sidenav com Angular Material
Figura 7. Sidenav com Angular Material

Para que nossa sidenav fique naturalmente oculta e seja aberta apenas quando o usuário clicar em um botão, podemos criar uma variável local para a sidenav e executar o método toggle dessa variável quando um botão for clicado:

<mat-sidenav-container>

<mat-sidenav #variavelLocalSidenav mode="side">

  Conteúdo da sidenav

</mat-sidenav>

<mat-sidenav-content>

  <button (click)="variavelLocalSidenav.toggle()">

    Toggle sidenav

  </button>

</mat-sidenav-content>

</mat-sidenav-container>

Ícones, Botões e Indicadores

O Angular Material fornece componentes para botões dos mais diversos tipos, ícones, alertas e barras de carregamento.

Icons

O Angular Material fornece uma gama de ícones que podemos utilizar na nossa aplicação como simples componentes:

Ícones do Material Design com Angular Material
Figura 8. Ícones do Material Design com Angular Material

Para utilizar os ícones do Material Design na nossa aplicação precisaremos, antes, importar o módulo de ícones:

import  from '@angular/material/icon;


@NgModule({

...

imports: [

  ...

  MatIconModule

  ...

],

...

})

export class AppModule { }

Listagem 1. NOME

Podemos utilizar os ícones através do componente mat-icon, passando para este o nome do ícone que desejamos utilizar:


<mat-icon>home</mat-icon>

Para conferir a lista completa de ícones basta acessar a página de ícones do Material Design.

Button

O elemento button, do HTML, pode ser estilizado com o Angular Material de forma a seguir os padrões do Material Design. Em sua forma mais básica temos um botão de fundo transparente e texto de cor que pode variar de acordo com o tema escolhido para a aplicação:

Botões estilizados com Angular Material
Figura 9. Botões estilizados com Angular Material

Para estilizar botões com o Angular Material precisaremos importar o módulo do mesmo para dentro do módulo da nossa aplicação:

import  from '@angular/material/button;


@NgModule({

...

imports: [

  ...

  MatButtonModule

  ...

],

...

})

export class AppModule { }

Entretanto, diferentemente dos elementos que vimos até então, nós não utilizaremos componentes para estilizar os botões, mas sim diretivas. Diretivas são um recurso do Angular que permite modificarmos a aparência e atribuir comportamento a elementos HTML.

Para criar o botão que vimos na imagem figura 9, utilizaremos a diretiva mat-button:

<button mat-button>Básico</button>

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

<button mat-button color="accent">Accent</button>

<button mat-button color="warn">Warn</button>

<button mat-button disabled>Disabled</button>

Podemos criar, também, Raised Buttons, um tipo de botão que possui cor de fundo (de acordo com o tema escolhido) e sombra:

Raised Buttons com Angular Material
Figura 10. Raised Buttons com Angular Material

Para esse tipo de botão utilizaremos a diretiva mat-button:


<button mat-raised-button>Basic</button>

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

<button mat-raised-button color="accent">Accent</button>

<button mat-raised-button color="warn">Warn</button>

<button mat-raised-button disabled>Disabled</button>

<a title="link" mat-raised-button routerLink=".">Link</a>

Existem diversos tipos de botões, como Flat Buttons, Stroked Buttons, Icon Buttons, Fab Buttons e Mini Fab Buttons:

Botões estilizados com Angular Material
Figura 11. Botões estilizados com Angular Material
Para os botões que possuem ícones precisaremos importar o módulo de ícones.

A implementação dos outros tipos de botões é tão simples quanto as que já vimos:


<!-- Flat Buttons -->

<button mat-flat-button>Basic</button>

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

<button mat-flat-button color="accent">Accent</button>

<button mat-flat-button color="warn">Warn</button>

<button mat-flat-button disabled>Disabled</button>

<a title="link" mat-flat-button routerLink=".">Link</a>


<!-- Stroked Buttons -->

<button mat-stroked-button>Basic</button>

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

<button mat-stroked-button color="accent">Accent</button>

<button mat-stroked-button color="warn">Warn</button>

<button mat-stroked-button disabled>Disabled</button>

<a title="link" mat-stroked-button routerLink=".">Link</a>


<!-- Icon Buttons -->

<button mat-icon-button>

 <mat-icon>favorite</mat-icon>

</button>

<button mat-icon-button color="primary">

 <mat-icon>favorite</mat-icon>

</button>

<button mat-icon-button color="accent">

 <mat-icon>favorite</mat-icon>

</button>

<button mat-icon-button color="warn">

 <mat-icon>favorite</mat-icon>

</button>

<button mat-icon-button disabled>

 <mat-icon>favorite</mat-icon>

</button>


<!-- Fab Buttons -->

<button mat-fab>Basic</button>

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

<button mat-fab color="accent">Accent</button>

<button mat-fab color="warn">Warn</button>

<button mat-fab disabled>Disabled</button>

<button mat-fab>

 <mat-icon>favorite</mat-icon>

</button>

<a title="link" mat-fab routerLink=".">Link</a>


<!-- Fab Mini Buttons -->

<button mat-mini-fab>Basic</button>

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

<button mat-mini-fab color="accent">Accent</button>

<button mat-mini-fab color="warn">Warn</button>

<button mat-mini-fab disabled>Disabled</button>

<button mat-mini-fab>

 <mat-icon>favorite</mat-icon>

</button>

<a title="link" mat-mini-fab routerLink=".">Link</a>

Badges

No Material Design, badges são pequenos selos onde podemos colocar informações adicionais referente ao texto, botão ou ícone:

Badges com Angular Material
Figura 12. Badges com Angular Material

Para utilizarmos badges precisaremos, antes, importar seu respectivo módulo:

import  from '@angular/material/badge;


@NgModule({

...

imports: [

  ...

  MatBadgeModule

  ...

],

...

})

export class AppModule { }
Listagem 1. NOME

Badges, assim como buttons, não são componentes, mas sim diretivas. Para utilizá-los basta incluir a diretiva matBadge a um elemento HTML ou componente. Outras diretivas também estão disponíveis, tais como:

Diretiva

Descrição

matBadgeOverlap

Indica se o badge deve ficar sobreposto ao item ou não.

matBadgePosition

Indica a posição do badge, podendo ser a combinação entre above ou below com before ou after.

matBadgeColor

A paleta de cores do badge, podendo ser primary, accent ou warn.

MatBadgeSize

Tamanho do badge, podendo ser small, medium ou large.

matBadgeDescription

Descrição aria-describedby do badge.

Badges podem ser utilizados com diferentes elementos:

<!-- Texto com badge -->

<span matBadge="4" matBadgeOverlap="false">Texto com badge</span>


<!-- Button com badge -->

<button

  mat-raised-button color="primary"

  matBadge="8"

  matBadgePosition="before|above"

  matBadgeColor="accent"

  matBadgeDescription="Badge com valor 8">

  Clique!

</button>


<!-- Ícone com badge -->

<mat-icon matBadge="15" matBadgeColor="warn">home</mat-icon>
Listagem 1. NOME

Progress Spinner Em algumas situações, as ações do usuário podem ocasionar um processamento longo ou mesmo uma requisição para o servidor. Nesses casos, para que indiquemos para o usuário que a aplicação está realizando a tarefa, podemos mostrar um progress spinner até que a tarefa seja finalizada:

Spinner de progresso com Angular Material
Figura 13. Spinner de progresso com Angular Material

Para adicionarmos Spinners a nossa aplicação, precisaremos importar seu respectivo módulo:

import  from '@angular/material/progress-spinner;


@NgModule({

...

imports: [

  ...

  MatProgressSpinnerModule

  ...

],

...

})

export class AppModule { }
Listagem 1. NOME

Para criar um Progress Spinner utilizamos o componente conhecido pelo nome mat-progress-spinner, passando como parâmetro um modo de execução, que pode ser indeterminate ou determinate.

O modo indeterminate irá gerar um spinner que circula infinitamente, como vimos na imagem figura 13, e pode ser implementado da seguinte forma:


<mat-progress-spinner mode="indeterminate"></mat-progress-spinner>

Listagem 1. NOME

O modo determinate irá gerar um spinner que fixo em um determinado valor:

Spinner de progresso com Angular Material
Figura 14. Spinner de progresso com Angular Material

Esse valor, passado através do atributo value, deve estar entre 0 e 100:

<mat-progress-spinner mode="determinate" value="75"></mat-progress-spinner>
Listagem 1. NOME

Progress Bar

Similar ao progress spinner, também podemos utilizar a progress bar para indicar pro usuário que uma tarefa está sendo executada:

Barra de progresso com Angular Material
Figura 15. Barra de progresso com Angular Material

Para utilizar a progress bar, precisaremos importar seu respectivo módulo para dentro da aplicação:

import  from '@angular/material/progress-bar;


@NgModule({

...

imports: [

  ...

  MatProgressBarModule

  ...

],

...

})

export class AppModule { }
Listagem 1. NOME

Da mesma forma que o progress spinner, a progress bar pode ser utilizada no modo indeterminate, onde o barra de progresso irá circular infinitamente, ou determinate, onde precisaremos determinar um valor de parada entre 0 e 100, através do atributo value. A implementação é similar ao progress spinner. Dessa vez, entretanto, utilizaremos o componente mat-progress-bar:

<mat-progress-bar mode="indeterminate"></mat-progress-bar>


<mat-progress-bar mode="determinate" value="40"></mat-progress-bar>

Adicionalmente, a progress bar ainda possui um terceiro modo chamado buffer, onde é possível criar uma segunda linha. Esse tipo de barra de progresso é, normalmente, utilizada em player de vídeos: a barra principal indica o momento do vídeo que o usuário se encontra, a barra secundária indica o quanto do vídeo já foi baixado e a linha pontilhada o quanto ainda falta para ser baixado:

Barra de progresso com Angular Material
Figura 16. Barra de progresso com Angular Material

Nesse caso, além do atributo value, que representa a posição da barra principal, também precisaremos adicionar o atributo bufferValue, que representa a posição da barra secundária:

Layout

Componentes do tipo Layout são componentes utilizados, normalmente, para organizar o conteúdo da interface, de forma a facilitar a localização do conteúdo, títulos e menus. Dentre diversos componentes, os mais utilizados são Cards, Divider, Expansion Panel, List, Stepper e Tabs.

Card

Os cards do Material Design são amplamente utilizados para separar conteúdos distintos que apareçam em uma mesma tela:

Card completo com Angular Material
Figura 17. Card completo com Angular Material

Assim como outros componentes, para utilizar o Card, precisaremos importar seu respectivo módulo:

import  from '@angular/material/card;


@NgModule({

...

imports: [

  ...

  MatCardModule

  ...

],

...

})

export class AppModule { }

Em sua forma mais básica, um card é composto apenas de um fundo branco, uma sombra para destacá-lo e um conteúdo qualquer:

Card simples com Angular Material
Figura 18. Card simples com Angular Material

Esse resultado é obtido apenas utilizando o component mat-card:

<mat-card>Conteúdo do card!</mat-card>

Podemos adicionar título e subtítulo ao card, separando as informações através do tamanho e cor do texto:

Card, Título e Subtítulo com Angular Material
Figura 19. Card, Título e Subtítulo com Angular Material

Para isso, utilizamos outros componentes como mat-card-title, mat-card-subtitle e mat-card-content, em conjunto com o componente mat-card:

<mat-card>

<mat-card-title>Título do Card</mat-card-title>

<mat-card-subtitle>Subtítulo do Card</mat-card-subtitle>

<mat-card-content>Conteúdo do card!</mat-card-content>

</mat-card>

Podemos, ainda, adicionar botões abaixo do conteúdo do card:

Card e ações com Angular Material
Figura 21. Card e ações com Angular Material

Isso é feito através do componente mat-card-actions, onde podemos colocar qualquer tipo de botão:

<mat-card>

<mat-card-title>Título do Card</mat-card-title>

<mat-card-subtitle>Subtítulo do Card</mat-card-subtitle>

<mat-card-content>Conteúdo do card!</mat-card-content>

<mat-card-actions>

  <button mat-button>BOTÃO 1</button>

  <button mat-raised-button color="primary">BOTÃO 2</button>

</mat-card-actions>

</mat-card>

List

Listas são amplamente utilizadas em qualquer aplicação, e com o Material Design elas ganham uma aparência especial:

Lista com ícones, subtítulos e sessões no Angular Material
Figura 22. Lista com ícones, subtítulos e sessões no Angular Material

Para adicionarmos listas a nossa aplicação, precisaremos importar o módulo MatListModule para dentro da nossa aplicação:

import  from '@angular/material/list;


@NgModule({

...

imports: [

  ...

  MatListModule

  ...

],

...

})

export class AppModule { }
Listagem 1. NOME

A lista mais simples consiste de diversos itens, um abaixo do outro, sem muita estilização:

Lista com ícones, subtítulos e sessões no Angular Material
Figura 23. Lista simples com Angular Material

Essa lista é composta por dois componentes: mat-list, que agrupa os itens da lista, e um mat-list-item para cada item:

<mat-list>

<mat-list-item>Item 1</mat-list-item>

<mat-list-item>Item 2</mat-list-item>

<mat-list-item>Item 3</mat-list-item>

</mat-list>

No Material Design, listas podem possuir ícones:

Lista com ícones com Angular Material
Figura 24. Lista com ícones com Angular Material

Podemos utilizar a diretiva mat-list-icon no componente do ícone, e envolver o conteúdo do item com um elemento html qualquer, que receberá a diretiva mat-line:

<mat-list>

<mat-list-item>

  <mat-icon mat-list-icon>home</mat-icon>

  <p mat-line>Item com ícone 1</p>

</mat-list-item>

<mat-list-item>

  <mat-icon mat-list-icon>cloud</mat-icon>

  <p mat-line>Item com ícone 2</p>

</mat-list-item>

<mat-list-item>

  <mat-icon mat-list-icon>favorite</mat-icon>

  <p mat-line>Item com ícone 3</p>

</mat-list-item>

</mat-list>

Listas contam com divisores, que separam os itens da mesma:

Lista com divisores com Angular Material
Figura 25. Lista com divisores com Angular Material

Para adicionar divisores a lista, basta utilizar o componente mat-divider entre os itens da lista:

<mat-list>

<mat-list-item>

  <p mat-line>Item com divisor 1</p>

</mat-list-item>

<mat-divider></mat-divider>

<mat-list-item>

  <p mat-line>Item com divisor 2</p>

</mat-list-item>

<mat-divider></mat-divider>

<mat-list-item>

  <p mat-line>Item com divisor 3</p>

</mat-list-item>

<mat-divider></mat-divider>

</mat-list>

Expansion Panel

Expansion Panel permite escondermos informações até que o usuário clique para vê-las. Dessa forma, conseguimos construir interfaces mais limpas sem abrir mão de fornecer informações importantes ao usuário:

Menu sanfonado com Expansion panel do Angular Material
Figura 26. Menu sanfonado com Expansion panel do Angular Material

Para utilizarmos expansion panels, precisaremos importar seu respectivo módulo:

import  from '@angular/material/expansion;


@NgModule({

...

imports: [

  ...

  MatExpansionModule

  ...

],

...

})

export class AppModule { }
Um Expansion Panel é composto de um título para a sessão, uma descrição para a sessão e o conteúdo da sessão, que pode ser qualquer elemento HTML ou outros componentes Angular. Vejamos, então, a implementação do Expansion Panel na imagem figura 26.
<mat-accordion>

<mat-expansion-panel>

  <mat-expansion-panel-header>

    <mat-panel-title>

      Nome do panel com ícone personalizado 1

    </mat-panel-title>

    <mat-panel-description>

      Descrição!

    </mat-panel-description>

  </mat-expansion-panel-header>

  <p>

    Conteúdo do panel com ícone personalizado 1.

  </p>

</mat-expansion-panel>

<mat-expansion-panel>

  <mat-expansion-panel-header>

    <mat-panel-title>

      Nome do panel com ícone personalizado 2

    </mat-panel-title>

    <mat-panel-description>

      Outra descrição

    </mat-panel-description>

  </mat-expansion-panel-header>

  <p>

    Conteúdo do panel com ícone personalizado 2.

  </p>

</mat-expansion-panel>

</mat-accordion>

Tabs

Tabs são amplamente para organizar o conteúdo em diferentes abas. Uma aba é escolhida para ser exibida para o usuário (normalmente a primeira) e as seguintes, para que o usuário possa visualizá-las, precisará clicar em seu respectivo link do menu:

Material Design tabs com Angular Material
Figura 28. Material Design tabs com Angular Material

Para utilizar o componente de tabs precisaremos, antes de tudo, importar seu respectivo módulo:

import  from '@angular/material/tabs;


@NgModule({

...

imports: [

  ...

  MatTabsModule

  ...

],

...

})

export class AppModule { }

O elemento de tabs é um dos elementos mais simples e úteis do Material Design. Se trata apenas de um menu que provém acesso a diversas telas, com transição animada, como visto na imagem figura 28.

Para isso, utilizamos os componentes mat-tab-group, que agrupará todas as abas, e o componente mat-tab, que receberá um título (o nome que será usado no menu) e o conteúdo da página. Utilizaremos um componente mat-tab para cada aba:

<mat-tab-group>

<mat-tab label="Primeira">

  <p>

    Conteúdo 1

  </p>

</mat-tab>

<mat-tab label="Segunda">

  <p>

    Conteúdo 2

  </p>

</mat-tab>

<mat-tab label="Terceira">

  <p>

    Conteúdo 3

  </p>

</mat-tab>

</mat-tab-group>

Conclusão

Exploramos alguns dos principais componentes do Material Design utilizando o Angular Material, a implementação do Material Design para o Angular. Vimos componentes para a construção de interfaces, agrupar conteúdo e navegação. Em um próximo artigo veremos como utilizar os componentes de formulário do Angular Material, de forma a deixar nossos formulários mais bonitos, intuitivos e dinâmicos.

Confira também