Angular 2 – Angular Material

Curso básico gratuito de Angular 2 | kazale.comO objetivo dessa aula é demonstrar o uso do Angular Material com o Angular 2.

 

Digite seu email para se inscrever em nossa newsletter e receber atualizações sobre novos conteúdos.

Ao término dessa aula você aprenderá o que é, como instalar, e como configurar o Angular Material com o Angular 2.

1. Introdução

O Angular Material é uma biblioteca criada para fornecer componentes para o Angular 2.

Ela ainda está em desenvolvimento, porém já possui uma série de componentes prontos para serem utilizados na criação de aplicações.

O Angular Material pode ser utilizado como uma alternativa nativa ao Bootstrap para a criação de interfaces, uma vez que faz parte do Angular 2 e fornece já componentes específicos prontos para utilização.

A seguir vamos ver como instalar e utilizar o Angular Material com o Angular 2, utilizando como base o template de Angular 2 com Webpack aqui da Kazale.com. É importante salientar que os tópicos estudados aqui se aplicam a qualquer template que você utilize.

2. Baixando o template

O primeiro passo é baixar e configurar o template Angular 2 com Webpack da Kazale.com, para isso:

  1. Acesse a url https://github.com/m4rciosouza/kz-angular2-webpack-template
  2. Clique no botão verde “Clone or download”
  3. Clique em “Download Zip”
  4. Descompacte o arquivo em um local de sua preferência

Após descompactar e mover o código do template, no terminal acesse a raiz do diretório do template e digite (esse passo necessita do NodeJS instalado):

Aguarde a finalização da operação, que pode demorar alguns minutos.

3. Instalando o Angular Material

Agora que o template já está configurado, você deve instalar o Angular Material nele.

No terminal, na raiz do projeto, digite:

Os dois últimos comandos são opcionais, e servem para alguns componentes que precisam de iteração touch, como os sliders.

Agora que o Angular Material está instalado, é preciso importá-lo na aplicação. No caso do nosso projeto importamos o mesmo no arquivo ‘src/vendor.ts’, que ficará assim:

No arquivo ‘tsconfig.json’, utilizado pelo compilador Typescript, adicione o novo tipo do HammerJS:

Caso você utilize ícones na aplicação, será necessário importar o seguinte CSS no arquivo ‘src/index.html’:

Pronto, agora basta importar o módulo referente ao Angular Material para utilizá-lo.

Nessa aula iremos utilizar o componente ‘DemoComponent’, que já está integrado juntamente com o template, como teste.

Então, importe o módulo no arquivo ‘src/app/demo/demo.module.ts’, conforme abaixo:

Como nosso menu está localizado no componente principal da aplicação, também será necessário sua importação no módulo principal, conforme código a seguir:

Agora o Material Module está completo e pronto para utilização, conforme veremos no tópico a seguir.

4. Utilizando os componentes

Para a utilização dos componentes, primeiramente adicione alguns estilos CSS no arquivo CSS do componente de demonstração:

Agora adicione o código a seguir no arquivo HTML do componente de demonstração, ele contém o código de utilização dos principais componentes implementados até o momento:

Por último, altere o código do componente principal para adicionar um menu no padrão do Angular Material:

Com isso está finalizada a utilização dos componentes na aplicação.

5. Executando a aplicação

Com o código todo configurado e implementado, chegou a hora de executar a aplicação e visualizar os componentes criados no navegador, para isso no terminal, na raiz do projeto, digite:

Acesse a aplicação em http://localhost:8080 , e no menu selecione “Demo”.

6. Conclusão

Conforme visto ao longo dessa aula, foi possível conhecer uma nova biblioteca utilitária e muito promissora para a criação de aplicativos com o Angular 2.

O Angular Material não pode ser comparado com o Bootstrap, embora sejam parecidos, e a escolha de qual interface utilizar dependerá muito do projeto.

Hoje o Angular Material ainda possui limitações quanto ao número de componentes existentes para ele, mas num futuro próximo certamente será uma biblioteca a ser considera para a criação de aplicativos.

* Código fonte da aula: angular-material.zip

2 comentários em “Angular 2 – Angular Material

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

19 − sete =