We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Global Spinner - dynamically change label


I am using the Spinner component globally, as suggested in the documentation. The "createSpinner" function, through the SpinnerArgs interface, allows for setting a label to the spinner.

Our spinner is triggered for loading different types of data at different times. As a result, we need to change the label of the spinner every time we trigger it. (i.e. "Loading user profile....", "Loading xxx data...", etc)

So we need a way to set the label dynamically when the "showSpinner" method is called. 

Please let me know how this can be achieved.

1 Reply

VJ Vinitha Jeyakumar Syncfusion Team March 24, 2023 06:49 AM UTC

Hi Cosmin,

Your requirement to dynamically change the Spinner label can be achieved by changing the innerHtml of the label element like below,

Code snippet:
ngAfterViewInit() {
    //createSpinner() method is used to create spinner
      // Specify the target for the spinner to show
      target: document.getElementById('container'),
      label: 'loading...',

  public hideSpinner() {
    // hideSpinner() method used hide spinner

  public label1() {
    document.querySelector('.e-spin-label').innerHTML = 'lable 1 Changed';

  public label2() {
    document.querySelector('.e-spin-label').innerHTML = 'lable 2 Changed';


Live Chat Icon For mobile
Up arrow icon