Angular Material 2 com Angular 4

Usando o Angular Material 2 components com o Angular 4

O Material Design é um conceito de design criado pelo google com o intuito de tentar criar um padrão de design com uma melhor experiência para o usuário. o Angular Material 2 é um implementação desse conceito para o Angular.

Inicio

Para começar vamos criar um novo projeto com o @angular/cli, e adicionar as dependências que vamos usar nesse projeto que são o @angular/material, @angular/cdk, @angular/animations, hammerjs e o sweetalert2. para isso siga o exemplo abaixo.

$ ng new sampleMD --style scss
$ cd sampleMD
$ yarn add @angular/material @angular/cdk @angular/animations hammerjs sweetalert2
$ vscode ./

Para esse exemplo vamos criar um simples projeto que tenha um visual que siga o conceito do material design usando alguns componentes da biblioteca Angular Material 2 e que apresente uma caixa de dialogo do sweetalert2.

Incluindo o Angular Material 2 ao projeto

o primeiro arquivo que vamos editar é o .angular-cli.json para adicionar o arquivo hammerjs.min.js que o angular material usa para alguns eventos de touch. Adicione a linha abaixo na chave script.

"scripts": [   
    "../node_modules/hammerjs/hammer.min.js" 
],

Incluindo um tema ao projeto

O Angular material tem 4 temas pre definidos que são eles o "indigo-pink", "deeppurple-amber", "purple-green" e o "pink-bluegrey" você pode escolher qualquer um dos 4, para incluir o tema temos que alterar o arquivo src/style.css ou src/style.scss .

O próximo arquivo que temos que alterar é o app.modules.ts para incluir os módulos que precisamos no nosso projeto.

Agora vamos adicionar um metodo a class AppComponent que vai mostar uma mensagem na tela sempre que alguém clicar em um botão, alterando o arquivo app.components.ts.

E para finalizar vamos alterar o arquivo app.components.html com o conteúdo html da nossa aplicação.

Agora basta rodar a aplicação para testarmos.

$ ng serve --open

Angular Material 2

Conclusão

Com o Angular Material 2 temos uma ótima opção de biblioteca de componentes rápida e versátil para nossos projetos são mais de 22 componentes prontos para uso.

Para facilitar o entendimento eu subi o projeto de exemplo online aqui, e o source no github aqui.