Nessa aula vamos abordar a utilização de alguns componentes do Angular Material para que possamos criar aplicações mais interativas, no entanto tenha em mente que servirá como base para que o aluno possa estudar os demais componentes da biblioteca, pois são muitos componentes para se abordar em um material sucinto. Com isso, esperamos que o aluno consiga entender o funcionamento base das API’s das bibliotecas de UI do angular que seguem um padrão lógico similar, e dado a base já abordada de conceitos, podemos entender melhor como esses componentes são construídos e como interagir com eles.

Vamos começar com um componente de formulário: O datepicker.

Esse componente permite selecionar uma data em um formulário. Um exemplo interativo pode ser visto na documentação em:

Angular Material

Vamos analisar o código de exemplo do datepicker:

Figura 1: Código do componente datepicker.

1. Utilizamos opcionalmente um form field para agrupar as peças do nosso formulário, se o leitor preferir pode usar divs ou outra técnica, aqui o angular material apenas fornece um atalho que agrupa o label ao input da forma mais usual para um formulário.
2. Estilizamos o input para o angular material com a directive matInput (já tocamos nesse assunto mas acho que cabe uma explicação, vou acrescentar a seguir). A directive [matDatePicker] é responsável por acrescentar a lógica do datepicker ao input, e recebe como parâmetro o próprio componente que irá renderizar o calendário, neste caso, o picker.
3. Aqui foi adicionado um ícone que ao ser clicado abre o calendário. Novamente ele referência o calendário picker.
4. Por fim temos o calendário propriamente dito, ele não aparece na tela por padrão e tem o id #picker, isso irá criar uma variável do tipo do componente disponível na linguagem do angular.

O datepicker tem várias configurações que são passadas como input para o mesmo. Por exemplo, para iniciar escolhendo o ano adicione:

<mat-datepicker #picker startView=“year” [startAt]=“startDate”></mat-datepicker>

Dessa forma será renderizado um calendário conforme imagem abaixo:

Figura 2: Calendário com startView=“year”.

Outro recurso interessante está no date range, que é uma forma de escolher duas datas de início e fim. Nesse caso o código é diferente pois ele usa dois inputs:

Figura 3: Componente Date Range

1. Usamos um date-range-input que referencia o datepicker de forma similar ao exemplo anterior.