Search results

State Persistence

27 Oct 2021 / 1 minute 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.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
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():void {
        document.location.reload();
    }
    constructor() {
    }
}
Copied to clipboard
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 { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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