Como inserir um loading spinner em um botão Angular-Material (guia passo a passo)
O guia completo de apenas 2 minutos para inserir um loading spinner no botão Angular com Material
Não seria maravilhoso se o Angular Material Botão tivesse uma opção de loading?
Então...
Não seria maravilhoso se o Angular-Material tivesse um botão com um loading spinner?
Talvez como se fosse uma classe CSS ou algum atributo que a gente pudesse colocar nosso botão material em um estado de loading.
Acontece que existem algumas maneiras de fazer isso. E realmente não é tão difícil.
Vamos começar, vamos?
Usa a biblioteca ngx-loading-buttons
Este projeto é uma biblioteca Angular criada especificamente para adicionar um spinner de carregamento aos seus botões Angular Material.
O primeiro passo é instalá-lo, assim.
ng add ngx-loading-buttons
Isso fará o download da biblioteca e também adicionará um pequeno arquivo CSS ao seu arquivo angular.json
.
Em seguida, você precisará importar o NgxPagememoryModule
para o seu arquivo app.module.ts
. Aqui está um exemplo.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxLoadingButtonsModule } from 'ngx-loading-buttons';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxLoadingButtonsModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
E por último, adicione-o ao seu elemento <button>
assim.
<button mat-raised-button [mtBasicSpinner]="true">Salvar</button>
Você também pode ocultar o texto de um botão quando o controle giratório é ativado com a propriedade hideText
.
<button mat-raised-button [mtBasicSpinner]="true" [hideText]="true">Salvar</button>
Como criar a nossa própria solução
Mas e se você preferir evitar outra dependência?
Então veja como adicionar um spinner de carregamento a um botão Angular Material sem usar uma biblioteca.
Começa com o CSS.
@keyframes spinner {
to {transform: rotate(360deg);}
}
.spinner:before {
content: '';
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
border-radius: 50%;
border: 2px solid #ffffff;
border-top-color: #000000;
animation: spinner .8s linear infinite;
}
No meu caso, esse CSS seria colocado dentro do arquivo CSS do meu componente.
Em seguida, temos o arquivo HTML do nosso componente.
<div style="text-align:center">
<button mat-raised-button color="primary" [class.spinner]="loading" [disabled]="loading" (click)="save()">Save</button>
</div>
E por último, o arquivo Typescript do nosso componente.
export class AppComponent{
title = 'hello-world';
loading = false;
save(): void {
this.loading = true;
// do your saving thing here
}
}
Pronto!
Eu falei para você que seria fácil. De nada. Espero que tenha gostado!
Conclusão: Hora de girar um comentário
O que você acha dessa abordagem para adicionar um spinner de carregamento a um botão Angular Material?
Existe uma maneira melhor?
Deixe-me saber nos comentários abaixo.
Consultor e Freelancer Angular
P.S. - Se você é um skimmer como eu, aqui está o assunto deste artigo.
- A maneira simples de adicionar um spinner de carregamento aos seus botões Angular Material... em menos de 2 minutos.
- Como adicionar um spinner de carregamento aos botões do Angular Material sem instalar novas dependências.
- Como a nova ngx-loading-buttons biblioteca vai facilitar sua vida como desenvolvedor Angular. 🎉 🎉 🎉
P.P.S. Se você achou este artigo útil, por favor, esmague uma das reações abaixo. 👇