Conteúdo

Iniciando com Angular Material

Fala stakers!

O Angular Material é uma biblioteca de componentes que facilita em muito o seu uso. Existem muitos tipos de componentes que podemos usar deles, alguns exemplos do site como calendários, inputs, botões de switch, botões, sliders, ícones e muitos outros.

Vale frisar que ele permite a customização dos componentes e caso não tenha interesse em customizar, pode usar os pré-prontos também.

Motivo para usar o Material do Angular

Como ele é mantido pelo time do Google, sempre que o Angular é atualizado o Material também é atualizado, sendo assim a vantagem é muito grande, pois evita muitos erros e quebra de códigos, por não ser uma biblioteca externa.

Com apenas um código o Angular e o Material são atualizados juntos, evitando assim o esquecimento de atualizar um e não o outro.

O Google é muito cuidadoso com seus produtos, então todos os Materials disponíveis no site do Angular são testados e aprovados por todo o time.

E como instalar o Material do Angular?

Antes de tudo, nós devemos ter um projeto existente para fazer a instalação do Material, então vamos começar usando nosso velho conhecido CLI para isso.

npm install -g @angular/cli
ng n meu-projeto

Com o nosso projeto existente, agora é a hora do Material brilhar.

cd meu-projeto
ng add @angular/material

Quando rodarmos o código, ele irá fazer algumas perguntas de configuração, marque as que você acha mais interessantes para seu projeto.

Como utilizar o Materials?

Antes de tudo devemos fazer o import do modulo.

Um exemplo, vamos fazer o import de um material do tipo Button.

// Importe dentro do seu Module
import {MatButtonModule} from '@angular/material/button';

Os imports e códigos, podem ser obtidos diretamente do site do Material.

<button id="basic" type="button" mat-button>Botão</button>

E como importar todos os Materials de uma vez?

Não existe bem uma maneira correta de fazer isso, pois não é possível que alguma aplicação irá utilizar tudo de uma vez. É muito custoso e irá consumir muita banda para isso.

Mas vamos lá, podemos fazer isso dentro do app.module.ts e fazer todos os imports dentro dele, mas eu acho que a maneira correta seria fazer o import dentro do modulo que precisarmos.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// Component Projeto Angular
import { AppComponent } from './app.component';
 
// Alguns componentes angular material
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatCheckboxModule} from '@angular/material';
import {MatButtonModule} from '@angular/material';
import {MatInputModule} from '@angular/material/input';
import {MatAutocompleteModule} from '@angular/material/autocomplete';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatRadioModule} from '@angular/material/radio';
import {MatSelectModule} from '@angular/material/select';
import {MatSliderModule} from '@angular/material/slider';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import {MatMenuModule} from '@angular/material/menu';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatListModule} from '@angular/material/list';
import {MatGridListModule} from '@angular/material/grid-list';
import {MatCardModule} from '@angular/material/card';
import {MatStepperModule} from '@angular/material/stepper';
import {MatTabsModule} from '@angular/material/tabs';
import {MatExpansionModule} from '@angular/material/expansion';
import {MatButtonToggleModule} from '@angular/material/button-toggle';
import {MatChipsModule} from '@angular/material/chips';
import {MatIconModule} from '@angular/material/icon';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import {MatDialogModule} from '@angular/material/dialog';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatSnackBarModule} from '@angular/material/snack-bar';
import {MatTableModule} from '@angular/material/table';
import {MatSortModule} from '@angular/material/sort';
import {MatPaginatorModule} from '@angular/material/paginator';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatCheckboxModule,
    MatCheckboxModule,
    MatButtonModule,
    MatInputModule,
    MatAutocompleteModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatMenuModule,
    MatSidenavModule,
    MatToolbarModule,
    MatListModule,
    MatGridListModule,
    MatCardModule,
    MatStepperModule,
    MatTabsModule,
    MatExpansionModule,
    MatButtonToggleModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatDialogModule,
    MatTooltipModule,
    MatSnackBarModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Lembrando eu não concordo colocar tudo de uma vez, porém é apenas uma poc para lhe apresentar!

Gostou? Quer aprender mais de angular? Então veja aqui nosso Curso de Angular.

Quer aprender mais de angular? Não se esqueça de acessar os nossos conteúdos do blog e do Youtube.

Iniciando com Angular Material

Iniciando com Angular Material

Motivo para usar o Material do Angular

E como instalar o Material do Angular?

Como utilizar o Materials?

E como importar todos os Materials de uma vez?

Difícil de aprender?

Enviar Comentário Cancelar resposta

Tenha uma carreira
Front-end de Sucesso!

Ebook - JORNADA FRONT-END

Ebook enviado com sucesso! Verifique sua caixa de e-mail.

Iniciando com Angular Material

Iniciando com Angular Material

Motivo para usar o Material do Angular

E como instalar o Material do Angular?

Como utilizar o Materials?

E como importar todos os Materials de uma vez?

Difícil de aprender?

Enviar Comentário Cancelar resposta

Tenha uma carreiraFront-end de Sucesso!

Ebook - JORNADA FRONT-END

Ebook enviado com sucesso! Verifique sua caixa de e-mail.

Tenha uma carreira
Front-end de Sucesso!