Spinner inside the button in Angular

Question

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 :)

Answer 1

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
  }