Criando uma barra de menu com Angular Material

Esse post é continuação do post anterior sobre criação de um projeto em angular. Agora iremos utilizar uma ferramenta do angular que permite implementar interfaces interativas do Google.

Em primeiro lugar entraremos no diretório onde está o projeto e digitar o comando: ng add @angular/material e pressione enter.

Logo em seguida aparece uma mensagem no console perguntando se deseja prosseguir com a instalação:

Logo em seguida aparece outra mensagem no console pedindo para o usuário selecionar um tema do Material, por opção do usuário escolho a primeira opção:

Logo em seguida, será questionado ao usuário se ele deseja utilizar as fontes do material, digite y e aperte enter.

Depois será exibida mais uma mensagem agora a respeito das animações, qual delas o usuário deseja utilizar. Por padrão iremos escolher a primeira opção:

Depois será executado o comando e a dependência do Angular Material será instalada no seu projeto.
 

Logo apos a instalação do angular material vamos começar a construção no menu propriamente dito.

Em primeiro lugar devemos criar o componente para fazer a barra de menu superior utilizando  o comando: ng g c header

Após rodar o comando será criado o componente header, que será o cabeçalho do nosso sistema.

PS: Esses comandos podem ser digitados tambem pelo VS Code utilizado o terminal do mesmo.

Dentro do diretório header abra os arquivos header.component.app, header.component.css.

A partir daqui começaremos a utilizar o Angular Material

Primeiramente, abriremos o arquivo app.module.ts e inserimos os componentes necessários para a construção do cabeçalho:

Abrindo o arquivo iremos inserir as seguintes linhas de codigo:

Nos imports iremos inserir os componentes que iremos utilizar para construção menu:

import {MatToolbarModule} from '@angular/material/toolbar'; import {MatButtonModule} from '@angular/material/button';

E nos imports inserimos os dois módulos responsável por criar a barra de menu superior.

 imports: [

    BrowserModule,

    AppRoutingModule,

    BrowserAnimationsModule,

    MatToolbarModule,

    MatButtonModule,

  ],

Após inserir esses componentes iremos para a criação do barra de menu propriamente dita.

Dentro do arquivo, iremos inserir o código responsável pela criação da barra de menu.

A imagem acima apenas mostra como criamos uma barra de menu. Logo em seguida iremos inserir nosso componente na pagina inicial em app.component.html

O seletor <app-header> mostrado acima pode ser encontrado no código abaixo

Apos inserir o seletor na pagina inicial iremos ver como esta ficando nosso cabeçalho, usando o comando ng s.

Como mostra a imagem acima já é possível ver nossa barra como foi mostrado no codigo anterior. Agora, iremos para a parte de estilização, colocando Login e Matricule-se no canto superior direito da pagina

Colocando as configurações acima nos temos o seguinte resultado.

Bom esse foi mais um tutorial.. Obrigado pela atenção;

Bibliogragia:

DEVMEDIA. 2019: Acesso em: https://www.devmedia.com.br/primeiros-passos-com-o-angular-material/40409#:~:text=O%20Angular%20Material%20é%20a,cards%2C%20imagens%20e%20muito%20mais.