State Persistence in Syncfusion Angular components

18 Jan 20233 minutes to read

Syncfusion Angular UI components support persisting their state across page refreshes or navigation. To enable this feature, set the enablePersistence property to true for the desired component. This stores the component’s state in the browser’s localStorage object on the unload event of the page. For example, the enablePersistence property can be set for the Grid component, as shown in the following code snippet.

app.component.ts
app.module.ts
main.ts
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { PageSettingsModel } from '@syncfusion/ej2-angular-grids';

@Component({
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [enablePersistence]='true' [allowPaging]="true" [pageSettings]='pageSettings'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                    <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
                    <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width=120></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data: object[];
    public pageSettings: PageSettingsModel;

    ngOnInit(): void {
        this.data = data;
        this.pageSettings = { pageSize: 6 };
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { PageService, SortService, FilterService, GroupService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [PageService,
        SortService,
        FilterService,
        GroupService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

State Persistence supported components and properties

The following table illustrates the list of Syncfusion Angular components that are supported with state persistence and the properties that are stored in the localStorage.

component Name	Properties
Grid	Columns filterSettings searchSettings groupSettings pageSettings selectedRowIndex scrollPosition
Accordion	expandedIndices
Tabs	selectedItem
Schedule	currentView selectedDate scrollLeft scrollTop
Kanban	columns dataSource swimlaneToggleArray
Chart	zoomFactor zoomPosition
Maps	zoomSettings
Pivot Table	dataSourceSettings pivotValues gridSettings chartSettings displayOption
TreeGrid	columns pageSettings searchSettings filterSettings selectedRowIndex sortSettings
Switch, Checkbox	checked
RadioButton	checked value
ColorPicker, ListBox, In-placeEditor, RichTextEditor, Autocomplete, Calendar, ComboBox, DatePicker, DropDownList, MaskedTextBox, NumericTextBox, Textbox, TimePicker, Multiselect, DateTimePicker, Slider, Dropdown Tree	value
QueryBuilder	rule
Splitter	paneSettings
DateRangePicker	startDate endDate value
Uploader	filesData
ListView	cssClass enableRtl htmlAttributes enable fields animation headerTitle sortOrder showIcon height width showCheckBox checkBoxPosition
TreeView	selectedNodes checkedNodes expandedNodes
Dashboard Layout	panels
File Manager	view path selectedItems
Sidebar	type position isOpen

Check out the following component’s document to learn more about the state persistence.