CODEWITHSUNDEEP
angular
ramya chockalingam
ramya chockalingam

Reputation: 155

Spinner inside the button in Angular

I have a button Update.After entering the Inputs,When user enters Update,button should show Updating instead of Update.

But I need spinner inside this button before Updating.

I surfed in the net,there is a option of mat-progress-buttons.The problem is,the spinner is in the middle of the button without showing any text like Updating.

But I need a spinner before Updating.That spinner should be also inside the button.

Thanks in advance :)

Upvotes: 2

Views: 9166

Answers (2)

Kaspacainoombro
Kaspacainoombro

Reputation: 161

To complement, you can add the Awesome font in angular following these instructions.

And more information in the package

component.html

<button
    [disabled]="disabled"
    [style.pointer-events]="spin?'none':''"
    (click)="spin=true"
    type="submit">
    <fa-icon [icon]="faSpinner" [spin]="true" *ngIf="spin"></fa-icon>
</button>

component.ts

import {Component, Input, SimpleChanges} from '@angular/core';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';

@Component({
    selector: 'app-save-button',
    templateUrl: './save-button.component.html',
    styleUrls: ['./save-button.component.scss']
})
export class SaveButtonComponent{
    @Input() label = '';
    @Input() disabled = false;
    spin = false;
    faSpinner = faSpinner;

    ngOnChanges(changes: SimpleChanges) {
        if('disabled' in changes && changes.disabled)
            this.spin=false;
    }
}

app.module.ts

    import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
...
imports: [...FontAwesomeModule...

Upvotes: 0

Adrita Sharma
Adrita Sharma

Reputation: 22213

You can create a reusable button child component like this:

Working Demo

child.html

<button [disabled]="disabled" class="btn rounded-btn btn-primary submitBtn"  [style.pointer-events]="spin?'none':''"  id=submitBtn>
   <i class="fa fa-spinner fa-spin " *ngIf="spin"> </i>
  &nbsp; {{spin? 'Updating' : 'Update'}} &nbsp;
</button>

child.ts

@Component({
  selector: 'save-button',
  templateUrl: './save-button.component.html',
  styleUrls: ['./save-button.component.css']
})
export class SaveButtonComponent implements OnInit {

  constructor() { }
  @Input() disabled: boolean;
  @Input() spin: boolean

  ngOnInit() {
  }

}

parent.html

<save-button  (click)="onSubmit()" [spin]="spinLoader"></save-button>

parent.ts

spinLoader= false;

  onSubmit() {
    this.spinLoader = true
  }

Upvotes: 8

Related Questions