Angular 6 - Material Design com Angular Material - I

  Hoje vou apresentar o Angular Material e os conceitos básicos de como usar o recurso em projeto Angular.

O Angular Material é uma implementação do Material Design no Angular feita pela Google. Ele é composto por diversos componentes, bibliotecas CSS e outros elementos, e, faz parte do gerenciador de pacotes do Node o NPM, podendo ser considerado mais um recurso que você pode adicionar ao seu projeto Angular.

Atenção !!!  Eu estou usando o Angular 6 e as versões citadas do Angular Material.

Assim você pode incorporar recursos como autocomplete, datepicker, slider, menus e barra de ferramentas em sua aplicação de forma relativamente simples bastando importar o pacote do Material no seu projeto.

No Angular 2 o pacote do Material era disponiblizado como parte do módulo @angular/core, mas a partir do Angular 4 ele é disponibilizado no módulo @angular/material.

Assim para começar a usar os recursos do Angular Material, você precisa instalar dois pacotes : material e cdk

O comando padrão para instalar os pacotes é : npm install --save @angular/material @angular/cdk

Mas vamos usar um novo recurso do Angular 6 para incluir os recursos em nosso projeto.

Além disso os componentes do Material dependem do módulo de animações para recursos avançados e você pode precisar instalar o pacote de animação : @angular/animations.

Então vamos mostrar um exemplo prático bem simples. Para iniciar você precisa ter instalado os seguintes recursos:

1 -  Angular 4 : Inicie instalando o Node.js e o npm e depois passe para o item 2; (Para verificar o seu ambiente abra um janela de comandos e digite os comandos : node -v e npm -v )

2 -  Angular CLI  é uma interface de linha de comando que facilita e acelera a criação de aplicação Angular : npm install -g @angular/cli  (para verificar o ambiente digite : ng -v )

Criando um projeto e Instalando o Angular Material

Abra um prompt de comandos e digite o comando a seguir para criar a aplicação Angular : ng new angmaterial

Utilizamos o comando ng new para criar um novo projeto angular chamado: angmaterial

Usando o Angular 6 temos o novo comando ng add que facilita a inclusão de novos recursos no projeto.

Esse comando usará o gerenciador de pacotes para fazer o download de novas dependências e chamar os scripts de instalação correspondentes. Isso é garantir que o projeto seja atualizado com dependências, alterações de configuração e que o código de inicialização específico do pacote seja executado.

Vamos instalar no projeto o Angular Material versão 6.2.1 (que é a mais estável) digitando: ng add @angular/material@6.2.1
A seguir entre na pasta do projeto criado e digite o comando para abrir o projeto no VS Code : code .

Acima vemos o projeto aberto no VS Code onde o arquivo package.json mostra as versões de todas dependências do npm utilizadas incluindo os pacotes : material e animations instalados.

Explorando os componentes básicos do Material

Após adicionar os novos componentes do Angular material ao projeto podemos usar o comando ng generate para iniciar como Material.

Os seguintes componentes iniciais estão disponíveis:

@angular/material: materialDashboard: Cria um componente de painel baseado em cartão;
@angular/material: materialTable: Cria um componente que exibe dados com uma tabela de dados;
@angular/material: materialNav: Cria um componente com um sidenav responsivo para navegação;

Para poder usar esse componentes básicos precisamos usar o comando ng generate para gerar os nosso componentes da seguinte forma:

ng generate @angular/material:materialNav --name minhaNav
ng generate @angular/material:materialDashboard --name minhaDashboard
ng generate @angular/material:materialTable -- name minhaTable

Cada um desses comandos vai gerar um componente na respectiva pasta, e, cada componente terá 3 arquivos principais :

Conforme mostrado abaixo:

Note que o arquivo app.module.ts foi atualizado e a classe MinhaNavComponent foi adicionado à matriz de declarações do decorador @NgModule no AppModule para que o componente possa ser usado pela aplicação Angular:

Agora vamos executar os demais comandos para gerar os demais componentes:

Para tornar o componente de navegação (MinhaNavComponent) visível abra o arquivo app.component.html e substitua o conteúdo deste arquivo por :

<minha-nav></minha-nav>

Abrindo o arquivo minha-nav.component.html veremos o código gerado :

Para testar digite o comando para ng serve para iniciar um servidor HTTP rápido e leve para testar a aplicação:

Por padrão, o servidor é criado escutando na porta 4200, mas podemos alterar esse valor usando o parâmetro -port : Ex: ng serve -port 7000

Abrindo o navegador em http://localhost:4200 teremos nossa aplicação exibindo o componente de navegação:

Muito bem, já temos um leiaute de navegação pronto.

Na próxima parte do artigo veremos como incrementar o projeto incluindo o roteamento e a navegação para outras páginas.

Havendo Deus antigamente falado muitas vezes, e de muitas maneiras, aos pais, pelos profetas, a nós falou-nos nestes últimos dias pelo Filho; A quem constituiu herdeiro de tudo, por quem fez também o mundo.
 Hebreus 1:1,2

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:

José Carlos Macoratti