State persistence in Angular Datepicker component

27 Sep 20232 minutes to read

The persistence is a process of maintaining the user interacted settings on page refresh.

In DatePicker, the selected or entered value has to be persisted on page refresh or navigation to another page. To persist the value set the enablePersistence property as true

It persists the value in local storage of the browser.

The following example demonstrates the persistence of selected date on page refresh.

Select or enter a date value and then refresh the page by clicking the button (Refresh). Now the previously selected date will be persisted.

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `<button id='btn' (click)='refresh($event)'> Refresh</button><br>
       <br> <ejs-datepicker placeholder='Enter date'></ejs-datepicker>
        `
})

export  class  AppComponent  {
    refresh(args: any):void {
        document.location.reload();
    }
    constructor() {
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';


/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        DatePickerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
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);