SERIE: INTEGRAÇÃO ASP.NET CORE E ANGULAR 7
Uma serie de três artigos explicando como integrar ASP.NET CORE com Angular 7

Olá meus caros, lindos, leitores, como estão? Ultimamente venho percebendo uma dúvida muito grande nos novatos em como utilizar o Material Angular em seus projetos Angular.
Nessa série, a primeira parte, nós criamos a API para que possamos consumir usando nosso projeto em Angular. Caso não tenha visto, clique aqui pra poder acompanhar desde o início. A segunda parte, criamos nosso projeto Angular e consumimos nossa API ASP.NET CORE e mostramos na tela os resultados. Caso não tenha visto, clique aqui para poder acompanhar.
E neste terceiro artigo vamos usar o Material Angular em nosso projeto Angular para dar um ar mais elegante ao nosso ToDo Project.
Para fazer isso, navegue até a pasta do projeto, como fizemos no artigo anterior e execute o seguinte comando:
ng add @angular/materialQuando você executar o comando, algumas perguntas serão feitas, acompanhe nas imagens abaixo:



Feito isso, se você der uma olhada no arquivo SCSS global do seu projeto Angular, o styles.scss, verá que automaticamente, foi adicionado um trecho de código, conforme abaixo:

Essa é a configuração do tema que você escolheu.
Após isso, temos que configurar os componentes do Material Angular em nosso projeto. Para isso, uma dica bem legal aqui, crie um arquivo chamado material-components.module.ts dentro da pasta App e coloque o seguinte código:
import { NgModule } from '@angular/core';
import {
MatAutocompleteModule,
MatBadgeModule,
MatBottomSheetModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatDividerModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatStepperModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatTreeModule,
MatFormFieldModule} from '@angular/material';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {CdkTableModule} from '@angular/cdk/table';
import {CdkTreeModule} from '@angular/cdk/tree';
@NgModule({
imports: [BrowserAnimationsModule, MatButtonModule, MatCheckboxModule, MatSidenavModule, MatFormFieldModule],
exports: [
CdkTableModule,
CdkTreeModule,
MatAutocompleteModule,
MatBadgeModule,
MatBottomSheetModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatStepperModule,
MatDatepickerModule,
MatDialogModule,
MatDividerModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatTreeModule,
MatFormFieldModule
]
})
export class MaterialComponentsModule { }Agora vá no arquivo app.module.ts e deixe ele da seguinte maneira:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TodoListComponent } from './todo/todo-list/todo-list.component';
import { TodoAddComponent } from './todo/todo-add/todo-add.component';
import { TodoUpdateComponent } from './todo/todo-update/todo-update.component';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialComponentsModule } from './material-components.module';
@NgModule({
declarations: [
AppComponent,
TodoListComponent,
TodoAddComponent,
TodoUpdateComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,
MaterialComponentsModule <-- Aqui a diferença
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Com isso, nosso projeto Angular vai conseguir achar os componentes que queremos usar na tela.
Bom, agora vamos estilizar nosso projeto Angular. Abra a tela de listagem, e coloque e seguinte código:
<mat-card>
<h2>Listagem de ToDos</h2>
<button mat-flat-button color="accent" routerLink="/todo-add">Nova ToDo</button>
<table mat-table [dataSource]="todoList" class="mat-elevation-z8">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef> ID </th>
<td mat-cell *matCellDef="let element"> {{element.id}} </td>
</ng-container>
<ng-container matColumnDef="titulo">
<th mat-header-cell *matHeaderCellDef> Título </th>
<td mat-cell *matCellDef="let element"> {{element.title}} </td>
</ng-container>
<ng-container matColumnDef="descricao">
<th mat-header-cell *matHeaderCellDef> Descrição </th>
<td mat-cell *matCellDef="let element"> {{element.description}} </td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> </th>
<td mat-cell *matCellDef="let element">
<mat-icon class="example-icon" aria-hidden="false" aria-label="Example edit icon"
routerLink="/todo-update/{{element.id}}">edit</mat-icon>
<mat-icon class="example-icon" aria-hidden="false" aria-label="Example delete icon"
(click)="deleteToDo(element)">delete</mat-icon>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</mat-card>No arquivo ts da listagem, adicione o seguinte trecho de código:
displayedColumns: string[] = ['id', 'titulo', 'descricao', 'actions'];Esse trecho é referente a configuração das colunas na tabela do Material Angular.
Vá no arquivo global de SCSS, o styles.scss, e adicione o seguinte trecho de código:
table {
width: 100%;
}
.example-icon {
padding: 0 14px;
cursor: pointer;
}O que fizemos foi estilizar mais um pouco nossa tabela. Colocamos a instrução para que ela ocupe toda a extensão da página. Nos ícones que temos, ajustamos um pouco o espaçamento entre eles.
Rode o projeto, com aquele comandinho que aprendemos no artigo anterior, e verá que sua tela vai ficar da seguinte maneira:

Fera, não? Já deu outra cara pro nosso projeto Angular, né?
Agora vamos para a página de criação de uma nova ToDo. Seguindo o mesmo raciocínio da tela de listar. O que fizermos aqui. vai servir pra tela de editar, então copia e cola mesmo, ok?
Deixe a tela de adicionar com o seguinte trecho de código:
<mat-card>
<form [formGroup]="form" class="example-form">
<mat-form-field class="example-full-width">
<input matInput placeholder="Título" formControlName="title">
</mat-form-field>
<mat-form-field class="example-full-width">
<textarea matInput placeholder="Descrição" formControlName="description"></textarea>
</mat-form-field>
</form>
<button mat-flat-button color="accent" (click)="addToDo()">Salvar</button>
</mat-card>E a tela de editar com o seguinte trecho:
<mat-card>
<form [formGroup]="form" class="example-form">
<mat-form-field class="example-full-width">
<input matInput placeholder="Título" formControlName="title">
</mat-form-field>
<mat-form-field class="example-full-width">
<textarea matInput placeholder="Descrição" formControlName="description"></textarea>
</mat-form-field>
</form>
<button mat-flat-button color="accent" (click)="updateToDo()">Salvar</button>
</mat-card>Pra ficar 100% agora, volte no arquivo geral de SCSS, o styles.scss e insira o seguite trecho de código:
.example-form {
min-width: 150px;
max-width: 500px;
width: 100%;
}
.example-full-width {
width: 100%;
}Se liga como a tela ficou:


Simples ou não? Tranquilo demais né galera?
Aqui vai um detalhe, criei um branch específico pra mostrar pra vocês como usar o Material Angular, ok? Então naveguem até ele no GitHub!
Então fechou, galera!! Críticas construtivas são muito bem vindas. O projeto está no GitHub. Como é de código aberto, caso queiram contribuir, à vontade!!