How to use Spinner as a separate component?
This article explains how to use Spinner as a separate component. 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 Angular component.
The EJ2 spinner can be rendered as not only by scripts and CSS; it can be rendered as a direct Angular component also using the following ways:
- Create a custom Angular wrapper for the spinner component in a separate file, and then export the spinner component.
Spinner.component.html
<div id="spinner" class="spinner-demo"> </div>
Spinner.component.ts
import { Component } from "@angular/core";
import { createSpinner, showSpinner, setSpinner, hideSpinner } from "@syncfusion/ej2-popups";
export const inputs: string[] = ["label","cssClass","width","template","template"];
@Component({
selector: "ejs-spinner",
inputs: inputs,
templateUrl: "./spinner.html"
})
export class SpinnerComponent {
public label: string;
public cssClass: string;
public template: any;
public type: any;
public width: string;
public hideSpinner: Function = () => {
hideSpinner(document.getElementById("spinner"));
};
public showSpinner: Function = () => {
showSpinner(document.getElementById("spinner"));
};
constructor() { }
ngAfterViewInit() {
createSpinner({
target: document.getElementById("spinner"),
//specify the proerties here
label: this.label,
cssClass: this.cssClass,
template: this.template,
type: this.type,
width: this.width
});
}
}
- Import this component into the current or desired page, and then use this component with the given selector and properties.
Default.component.html
<div style="text-align:center"> <ejs-spinner #spin label="Loading"></ejs-spinner> </div>
Default.component.ts
import { Component, ViewChild } from "@angular/core";
import { SpinnerComponent } from "./spinner/spinner";
@Component({
selector: 'control-content',
templateUrl: 'default.html',
})
export class DefaultComponent {
@ViewChild("spin") spin: SpinnerComponent;
ngAfterViewInit() {
this.spin.showSpinner();
setTimeout(() => {
this.spin.hideSpinner();
}, 10000);
}
}
Refer to the working sample for additional details and implementation: sample.
The following screenshot illustrates the result of the above code sample.
You can apply the provided properties to the spinner component and find the spinner with the applied properties using the following code.
<div style="text-align:center"> <ejs-spinner #spin label="initializing.." type="Bootstrap" width="150px" ></ejs-spinner> </div>
The following screenshot illustrates the result of the above code sample.
Sample for rendering the spinner component as an Angular component: Sample.
