Save and Restore Layout State in Angular Dashboard Layout Component

27 Aug 20256 minutes to read

The Dashboard Layout component provides the ability to save the current layout configuration and restore it later, enabling users to persist their preferred panel arrangements across sessions or create reusable dashboard templates.

Save Layout State

The current layout structure of the Dashboard Layout component can be obtained and saved using the serialize public method of the component. This can be used to construct another dashboard with the same panel structure. This method returns the component’s current panel settings which can be used to construct a dashboard with the same layout settings.

Implementation Example

The following sample demonstrates how to save and restore panel states using the serialize method. The Save button stores the current panel settings, while the Restore button applies the previously saved configuration.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DashboardLayoutModule } from '@syncfusion/ej2-angular-layouts'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DashboardLayoutComponent, PanelModel } from '@syncfusion/ej2-angular-layouts';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';

@Component({
    imports: [DashboardLayoutModule, ButtonModule],
    standalone: true,
    selector: 'app-root',
    template: `
    <div class="control-section">
        <div class="inline" id="control">
            <ejs-dashboardlayout id='dashboard_default' #defaultLayout [columns]='5' [cellSpacing]='cellSpacing'
                [panels]='panels'>
            </ejs-dashboardlayout>
        </div>
        <div class="inline" id="properties">
            <button ejs-button id='saveBtn' #saveBtn cssClass="e-primary" (click)='onSaveClick($event)'>Save</button>
            <button ejs-button id='restoreBtn' #restoreBtn cssClass="e-flat e-outline" (click)='onrestoreClick($event)'>Restore</button>
        </div>
    </div>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild('defaultLayout') dashboard?: DashboardLayoutComponent;
    @ViewChild('saveBtn') saveBtn?: ButtonComponent;
    @ViewChild('restoreBtn') restoreBtn?: ButtonComponent;
    public restoreModel: any = [];
    public cellSpacing: number[] = [10, 10];
    public panels: any = [{ "sizeX": 1, "sizeY": 1, "row": 0, "col": 0, content: '<div class="content">0</div>' },
    { "sizeX": 3, "sizeY": 2, "row": 0, "col": 1, content: '<div class="content">1</div>' },
    { "sizeX": 1, "sizeY": 3, "row": 0, "col": 4, content: '<div class="content">2</div>' },
    { "sizeX": 1, "sizeY": 1, "row": 1, "col": 0, content: '<div class="content">3</div>' },
    { "sizeX": 2, "sizeY": 1, "row": 2, "col": 0, content: '<div class="content">4</div>' },
    { "sizeX": 1, "sizeY": 1, "row": 2, "col": 2, content: '<div class="content">5</div>' },
    { "sizeX": 1, "sizeY": 1, "row": 2, "col": 3, content: '<div class="content">6</div>' }
    ];

    onSaveClick(args: any) {
        this.restoreModel = this.dashboard?.serialize();
        this.restoreModel[0].content = '<div class="content">0</div>';
        this.restoreModel[1].content = '<div class="content">1</div>';
        this.restoreModel[2].content = '<div class="content">2</div>';
        this.restoreModel[3].content = '<div class="content">3</div>';
        this.restoreModel[4].content = '<div class="content">4</div>';
        this.restoreModel[5].content = '<div class="content">5</div>';
        this.restoreModel[6].content = '<div class="content">6</div>';
    }

    onrestoreClick(args: any) {
        this.dashboard!.panels = this.restoreModel;
    }
}

styles.css

@import "node_modules/@syncfusion/ej2-base/styles/material.css";
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-layouts/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';

#dashboard_default .e-panel .e-panel-container .content {
    vertical-align: middle;
    font-weight: 600;
    font-size: 20px;
    text-align: center;
    line-height: 90px;
}

div#properties {
    width: 205px;
    margin-left: 15px;
    padding: 15px;
    position: absolute;
}

.inline {
    display: inline-block;
}

div#control {
    width: 500px;
}

main.ts

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

You can refer to our Angular Dashboard Layout feature tour page for its groundbreaking feature representations. You can also explore our Angular Dashboard Layout example to knows how to present and manipulate data.