How to place a spinner on the button according to the service. Angular 2+

Question

How do I put a spinner in a button and this spinner will disappear only when the data is sent.... In case the data is not sent or give some problem in the server the spinner is there loading. I am a few days trying and not conisgo. Who can help I thank.

cadastro.component.ts

salvar(){
this.servico.cadastrar(this.foto).subscribe(()=>{
  this.mensagem = `Cadastro feito com sucesso`;
  this.foto = new FotoComponent();      
  setTimeout(()=> this.mensagem ='',
  2000)});

} }

cadastro.component.html

<form (ngSubmit)="salvar()" class="col-sm-6">
  <div class="form-group">
    <label>Título</label>
    <input name ="titulo" [(ngModel)]="foto.titulo" class="form-control" />
  </div>
  <div class="form-group">
    <label>URL</label>
    <input name="url" [(ngModel)]="foto.url" class="form-control" />
  </div>
  <div class="form-group">
    <label>Descrição</label>
    <textarea
      class="form-control"
      name="descricao"
      [(ngModel)]="foto.descricao"
      >{{ foto.descricao }}</textarea
    >
  </div>
  <button type="submit" class="btn  btn-default">Salvar</button>     
  <a [routerLink]="['']" class="btn btn-default">Voltar</a>
</form>

Answer 1

I do it this way and I’ll share an example, maybe it’ll work for you. I suggest creating a variable to control when the spinner will appear and control this variable in the request. Example using Fontawesome:

mostraSpin = false; //<--- adicione isto --->

salvar(){
mostraSpin = true; //<--- adicione isto --->
this.servico.cadastrar(this.foto).subscribe(()=>{
  mostraSpin = false; //<--- adicione isto --->
  this.mensagem = `Cadastro feito com sucesso`;
  this.foto = new FotoComponent();      
  setTimeout(()=> this.mensagem ='',
  2000)});

<button type="submit" class="btn btn-default">
    <i *ngIf="mostraSpin" class="fa fa-spinner fa-spin"></i>
    Salvar
</button>