Global Spinner - dynamically change label

[Cosmin Budac]

Hi,

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.

[Vinitha Jeyakumar]

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

    createSpinner({

      // Specify the target for the spinner to show

      target: document.getElementById('container'),

      label: 'loading...',

    });

  }

  public hideSpinner() {

    // hideSpinner() method used hide spinner

    hideSpinner(document.getElementById('container'));

  }

  public label1() {

    showSpinner(document.getElementById('container'));

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

  }

  public label2() {

    showSpinner(document.getElementById('container'));

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

  }

Sample: https://stackblitz.com/edit/angular-brc3fr?file=src%2Fapp.component.html,src%2Fapp.component.ts

Regards,

Vinitha