Types in Angular Spinner component

26 Feb 20263 minutes to read

By default, the Spinner type is automatically set based on the theme imported into the page. The spinner loads in the applicable Essential JS 2 component according to the selected theme.

The available spinner types are:

• Material
• Fabric
• Bootstrap

Change the spinner type by passing the type as a parameter to the setSpinner method.

// Specify the spinner type to display
setSpinner({ type: 'Bootstrap' });

Change the spinner type only after the Essential JS 2 component is created.

app.component.ts

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' });
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));