State Persistence in Syncfusion^® Angular components

18 Jun 20253 minutes to read

Syncfusion^® Angular UI components offer a powerful state persistence feature, allowing components to maintain their state even after page refreshes or navigations. This is particularly useful for applications where state consistency is key. To enable state persistence, simply set the enablePersistence property to true in the component configuration. This automatically stores the component’s state in the browser’s localStorage object during the page’s unload event.

Below is an example demonstrating how to set the enablePersistence property for the Grid component:

app.component.ts

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 { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { PageSettingsModel } from '@syncfusion/ej2-angular-grids';

@Component({
imports: [
        
        GridModule
    ],

providers: [PageService,
        SortService,
        FilterService,
        GroupService],
standalone: true,
    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 };
    }
}

main.ts

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

State Persistence supported components and properties

The table below lists the Syncfusion^® Angular components that support state persistence, along with the properties stored in localStorage. Utilizing these properties ensures that significant component configurations are preserved across sessions:

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

For a deeper understanding of state persistence and its application in various components, please refer to the following documentation pages for individual components:

• Grid
• TreeGrid
• Pivot Table
• Gantt
• Kanban
• Schedule
• QueryBuilder
• Tabs