How to use the spinner component as a separate service
The spinner is a load indicator; it is displayed whenever an application is processing or waiting for an operation. While the spinner is loading, you cannot interact with target until the process is completed.
You can render the spinner using the steps in our getting started UG document. Apart from normal rendering, you can also render the spinner as a separate service component.
Spinner also supports to render as an Angular service component. You can create the spinner as a separate service using `@Injectable` and use this service in any page. Refer to the following steps for more details:
- Create a separate service file, and then define the spinner as a service using `@Injectable`.
Spinner.service.ts
import { Injectable } from '@angular/core';
import {
createSpinner,
showSpinner,
setSpinner,
hideSpinner, SpinnerArgs, SetSpinnerArgs, SpinnerType
} from "@syncfusion/ej2-popups";
@Injectable()
export class SpinnerService {
constructor() {
}
hideSpinner: Function = (element: HTMLElement) => {
hideSpinner(element);
};
showSpinner: Function = (element: HTMLElement) => {
showSpinner(element);
};
createSpinner: Function = (spinnerArgs: SpinnerArgs) => {
createSpinner({
target: spinnerArgs.target,
label: spinnerArgs.label,
cssClass: spinnerArgs.cssClass,
template: spinnerArgs.template,
type: spinnerArgs.type,
width: spinnerArgs.width,
});
}
setSpinner: Function = (spinnerArgs: SetSpinnerArgs) => {
setSpinner({
cssClass: spinnerArgs.cssClass,
template: spinnerArgs.template,
type: spinnerArgs.type,
});
}
}
- Refer the service in the providers of the NgModule in the app.module.ts file
app.module.ts
import { SpinnerService } from './spinner.service';
@NgModule({
providers: [SpinnerService],
imports: [SharedModule, HttpModule, JsonpModule,BrowserModule],
declarations: [DefaultTabComponent],
bootstrap: [DefaultTabComponent]
})
- Get the spinner service from the service file to initialize the spinner component in your desired file.
Default.component.html
<div style="text-align:center"> <h1> Syncfusion Spinner Service </h1> <button class="e-btn" (click)="this.spinBtnClick($event)">Show-spinner</button> <div id="ej2Spinner" #spin></div> </div>
Default.component.ts
import { Component, ViewChild, ElementRef, ViewEncapsulation } from '@angular/core';
import { SpinnerService } from './spinner.service';
@Component({
selector: 'control-content',
templateUrl: 'default.html',
encapsulation: ViewEncapsulation.None
})
export class DefaultTabComponent {
@ViewChild("spin") spin: ElementRef;
constructor(private spinService: SpinnerService) {
}
spinBtnClick(e) {
this.spinService.showSpinner(this.spin.nativeElement);
setTimeout(() => {
this.spinService.hideSpinner(this.spin.nativeElement);
}, 3000)
}
ngAfterViewInit() {
this.spinService.createSpinner({
target: this.spin.nativeElement,
label: "Loading",
});
}
}
You can find the spinner as an Angular service in this sample.
The following screenshot illustrates the result of the above code sample.
You can apply the provided properties to the spinner component. Find the spinner with the applied properties in the following code sample.
ngAfterViewInit() {
this.spinService.createSpinner({
target: this.spin.nativeElement,
label: "Initializing...",
type: "Bootstrap",
width: "150px"
});
}
The following screenshot illustrates the result of the above code sample.
Sample for rendering the spinner component as an Angular service: Sample.
