CODEWITHSUNDEEP
angular
Augustine
Augustine

Reputation: 109

Angular: Show spinner on button click

I want to achieve a result of showing spinner when a button is clicked for saving data. The button should hide (in the process of saving the data to back end ) and should then be shown again when data is saved.

Below is HTML code

 <div class="card-footer">
        <div class="row">
          <div class="col text-danger col-form-label font-weight-bold">(*) Required fields</div>
          <div class="col text-right" *ngIf="!hidebutton">
            <app-spinner *ngIf="!showspinner"></app-spinner>
            <button class="btn btn-primary">To accept</button>
            <button class="btn btn-outline-secondary ml-4" (click)="getBack()">Cancel</button>
          </div>
        </div>
      </div>

Component.ts code

 export class DocumentFormComponent implements OnInit {
   hidebutton: boolean = false;
  onSubmit(form: NgForm) {
  this.hidebutton = true;
const swalWithBootstrapButtons = Swal.mixin({
  customClass: {
    confirmButton: 'btn btn-primary',
    cancelButton: 'btn btn-outline-secondary ml-4'
  },
  buttonsStyling: false
});

// validate the form
this.validateForm(form);

// this check if it's a new document to create
if (this.validForm) {
  const newDocument =  this.myDocument;
  const  formData = new FormData();
  formData.append('document', JSON.stringify(newDocument));
  formData.append('attachedFile', this.selectedFile);

  swalWithBootstrapButtons.fire({
    title: 'Are you sure?',
    text: 'You will not be able to revert this!',
    type: 'warning',
    showCancelButton: true,
    confirmButtonText: 'Yes, save it!',
    cancelButtonText: 'No, cancel!'
  }).then((result) => {
    // Save Doc
    if (result.value && !this.editing) {
      this.showspinner = true;
      this.documentService.saveDocument(this.customerId, formData)
        .subscribe(respondData => {
            swalWithBootstrapButtons.fire(
              'Saved!',
              'Your Document has been saved.',
              'success');
            // after success coming back document list
          this.hidebutton = false;
            this.showspinner = false;
            this.router.navigate(['/customers/', this.customerId, 'documents']);
        }, error => {
          swalWithBootstrapButtons.fire(
            'Didn`t save!',
            'Your Document could`t be saved.',
            'error');
      });}}

Upvotes: 0

Views: 3661

Answers (2)

Angela Amarapala
Angela Amarapala

Reputation: 1052

Use the save button to toggle your spinner. 

this.showspinner = this.hidebutton ? this.hidebutton : !this.hidebutton;

Upvotes: 2

luckysoni
luckysoni

Reputation: 59

<div class="card-footer">
        <div class="row">
          <div class="col text-danger col-form-label font-weight-bold">(*) Required fields</div>
          <div class="col text-right">
            <app-spinner *ngIf="hidebutton"></app-spinner>
            <button *ngIf="!hidebutton" class="btn btn-primary">To accept</button>
            <button *ngIf="!hidebutton" class="btn btn-outline-secondary ml-4" (click)="getBack()">Cancel</button>
          </div>
        </div>
      </div>

try this

Upvotes: 2

Related Questions