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.

https://github.com/dkreider/ngx-loading-buttons/raw/main/example.gif

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.

P.P.S. Se você achou este artigo útil, por favor, esmague uma das reações abaixo. 👇