Types in Angular Spinner component

5 Apr 20253 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.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { GridModule, PageService, SortService, FilterService, GroupService } from '@syncfusion/ej2-angular-grids'

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({
imports: [
        
        FormsModule,
        GridModule
    ],

providers: [
        PageService,
        SortService,
        FilterService,
        GroupService
    ],
standalone: true,
    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' });
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));