0

Como faz pra eu colocar um spinner num botão e esse spinner sumir só quando os dados forem enviados.... Casos os dados não forem enviados ou dar algum problema no servidor o spinner fica lá carregando. Estou a uns dia tentando e não conisgo. Quem pode ajudar agradeço.

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>
1
  • Vc usa algum pacote de icones? Se sim qual? Commented 19/09/2019 às 15:35

1 Resposta 1

0

Faço desta forma e vou compartilhar um exemplo, talvez sirva pra você. Sugiro criar uma variável para controlar quando o spinner vai aparecer e controlar esta variável no request. Exemplo usando 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>
1
  • Valeuuuu Ajudou aqui... Muito obrigado irmão
    – Dan100
    Commented 19/09/2019 às 16:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .