5
(4)
5
(4)

Introdução

Atualmente o Angular tem sido considerado um dos melhores frameworks javascript já desenvolvidos. Seu bom desempenho e fácil curva de aprendizagem tem gerado um considerável número de seguidores para esse grande trabalho desenvolvimento pela Google. Por isso sua evolução é constante e novidades sempre vão aparecendo com o passar do tempo.

Hoje falaremos sobre um recurso do Angular chamado “Angular Material”, responsável por permitir que aplicações desenvolvidas em Angular tenham um design totalmente material, sem que seja necessário um enorme esforço para isso.

Então vamos ao que interessa!

O que é o Angula Material?

O Angular Material é um módulo que faz parte do grande e conhecido Gerenciador de Pacotes do Node o NPM. Pode-se dizer que é mais um recurso que pode ser adicionado a um projeto Angular 2, lembrando que o NPM não é apenas para Angular 2, mas esse módulo do Angular Material é direcionado apenas para o framework em questão (Angular 2).

Por possuir uma fácil instalação e também muita facilidade em sua maneira de ser usado o Angular Material tem conquistado muitos fãs do Angular 2 e um dos maiores motivos de seu uso é o fato de ser um módulo desenvolvido também pela Google para complementar o Angular 2, facilitando o uso dos padrões material desenvolvidos pela empresa.

Instalação

Para instalar o Angular Material em sua aplicação Angular 2 é muito simples, basta seguir os passos abaixo (Caso já tenha um projeto instalado pule as etapas 1 e 2):

  • 1) Digite o comando abaixo para instalar o Angular 2 em sua máquina (Caso ainda não tenha feito a instalação do Angular 2);
npm install -g @angular/cli

2) Crie um projeto Angular após instalar o Angular 2 utilizando o comando;

ng new my-project

Adicione o Angular Material em seu projeto;

npm install --save @angular/material

Agora precisamos importar o módulo no arquivo que fica em src/app/app.module.ts, para isso faça como abaixo:

import { MaterialModule } from '@angular/material';
// Outros módulos importados

@NgModule({
  imports: [MaterialModule],
  ...
})
export class NomeDoAplicativoAppModule { }

É recomendável adicionar a linha abaixo no caminho src/index.html dentro da Tag <head></head> caso deseje utilizar os ícones do Material Design (Recomendável):

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Nesse exato momento já será possível utilizar os recursos do componente Angular Material. Através da página https://material.angular.io/components você terá acesso a todos os componentes que existem nesse módulo e a forma mais fácil de usar cada um deles.

Observação: Existem algumas configurações de instalação adicionais como hammerjs e temas por exemplo que não convém mostrar nessa postagem, mas para qualquer outra dúvida acesse: https://material.angular.io/guides

Exemplo de Uso

Podemos ver abaixo um exemplo de Card que o Angular Material proporciona de forma fácil (Acesse esse recurso clicando aqui)

Para que o card acima exista é necessário apenas algumas linhas de código:

Arquivo HTML:

<md-card class="example-card"><md-card-header><div md-card-avatar class="example-header-image"></div><md-card-title>Shiba Inu</md-card-title><md-card-subtitle>Dog Breed</md-card-subtitle></md-card-header><img md-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg"><md-card-content><p>
      The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
      A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
      bred for hunting.
    </p></md-card-content><md-card-actions><button md-button>LIKE</button><button md-button>SHARE</button></md-card-actions>
</md-card>

Arquivo TS (TypeScript):

import {Component} from '@angular/core';


@Component({
  selector: 'card-fancy-example',
  templateUrl: './card-fancy-example.html',
  styleUrls: ['./card-fancy-example.css'],
})
export class CardFancyExample {}

Arquivo CSS:

.example-card {
  width: 400px;
}

.example-header-image {
  background-image: url('https://material.angular.io/assets/img/examples/shiba2.jpg');
  background-size: cover;
}

Pode-se perceber que a aplicação do módulo Angular Material é muito fácil, agora que já instalou e já testou o exemplo, sinta-se pronto para utilizar esse poderoso módulo, que é um excelente complemento ao Angular 2. Foi um prazer compartilhar conhecimento.

O que você achou disso?

Clique nas estrelas

Média da classificação 5 / 5. Número de votos: 4

Nenhum voto até agora! Seja o primeiro a avaliar este post.

O que você achou disso?

Clique nas estrelas

Média da classificação 5 / 5. Número de votos: 4

Nenhum voto até agora! Seja o primeiro a avaliar este post.

Compartilhar.

Sobre o autor

Tiago Silva

Full-Stack Developer e Software Engineer, especialista em Python e JavaScript, professor e palestrante de assuntos voltados à programação web, desktop e mobile, ciência de dados entre outros assuntos. Escritor dos Livros Python de A a Z e Flask de A a Z.

Deixe uma resposta