Types in Angular Spinner component

27 Sep 20234 minutes to read

By default, the Spinner is loaded in the applicable Essential JS 2 component based on the theme imported into the page. Based on the theme, the type is set to the Spinner.

The available types are:

• Material
• Fabric
• Bootstrap

You can change the Essential JS 2 component spinner type by passing the type of the spinner as parameter to the setSpinner method like as below.

// Specify the type of the Spinner to be displayed
setSpinner({ type: 'Bootstrap'});

After Essential JS 2 component creation only, you can change the Essential JS 2 component spinner type.

app.component.ts

import { Component, ViewChild, OnInit } from '@angular/core';
import { GridComponent } from '@syncfusion/ej2-angular-grids';
import { setSpinner } from '@syncfusion/ej2-angular-popups';
import { data } from './datasource';

@Component({
    selector: 'app-container',
    template: `
        <h5> Grid is rendered with Bootstrap type Spinner </h5>
        <ejs-grid #grid [dataSource]='gridData' (created)='gridCreated()'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='right' width=120 type='number'></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=140 type='string'></e-column>
                <e-column field='Freight' headerText='Freight' textAlign='right' format='C' width=120></e-column>
                <e-column field='OrderDate' headerText='Order Date' width=120  format='yMd' width=140></e-column>
            </e-columns>
        </ejs-grid>
    `
})
export class AppComponent implements OnInit {
    @ViewChild('grid') grid: GridComponent | any;

    public gridData?: Object[];

    constructor() {}

    public ngOnInit(): void {
        this.gridData = data.slice(0, 7);
    }

    public gridCreated(): void {
        this.grid.hideSpinner = () => true;
        setSpinner({ type: 'Bootstrap' });
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { GridModule, PageService, SortService, FilterService, GroupService } from '@syncfusion/ej2-angular-grids';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [
        PageService,
        SortService,
        FilterService,
        GroupService
    ]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);