How can I help you?
Setting panel headers in Angular Dashboard layout component
4 Mar 202623 minutes to read
The Dashboard Layout component is primarily used to represent data for monitoring or managing processes. HTML templates or data can be placed as the content of a panel using the content property. Panel headers, which provide context and help users quickly identify panel content, can be added using the header property. Headers appear at the top of each panel and typically contain a descriptive title or label.
The following example demonstrates how to add content for each panel using the header and content properties of the panels.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DashboardLayoutModule } from '@syncfusion/ej2-angular-layouts'
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
imports: [DashboardLayoutModule],
standalone: true,
selector: 'app-root',
template: `
<div class="control-section">
<ejs-dashboardlayout id='defaultLayout' #defaultLayout [columns]='columns' [cellSpacing]='cellSpacing' [panels]='panels'>
</ejs-dashboardlayout>
</div>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public cellSpacing: number[] = [10, 10];
public columns: number = 6;
public panels: any = [{ 'id': 'Panel0', 'sizeX': 1, 'sizeY': 1, 'row': 0, 'col': 0, header: '<div>Panel 0</div>', content: '<div class="content">Panel Content<div>' },
{ 'id': 'Panel1', 'sizeX': 3, 'sizeY': 2, 'row': 0, 'col': 1, header: '<div>Panel 1</div>', content: '<div class="content">Panel Content<div>' },
{ 'id': 'Panel2', 'sizeX': 1, 'sizeY': 3, 'row': 0, 'col': 4, header: '<div>Panel 2</div>', content: '<div class="content">Panel Content<div>' },
{ 'id': 'Panel3', 'sizeX': 1, 'sizeY': 1, 'row': 1, 'col': 0, header: '<div>Panel 3</div>', content: '<div class="content">Panel Content<div>' },
{ 'id': 'Panel4', 'sizeX': 2, 'sizeY': 1, 'row': 2, 'col': 0, header: '<div>Panel 4</div>', content: '<div class="content">Panel Content<div>' },
{ 'id': 'Panel5', 'sizeX': 1, 'sizeY': 1, 'row': 2, 'col': 2, header: '<div>Panel 5</div>', content: '<div class="content">Panel Content<div>' },
{ 'id': 'Panel6', 'sizeX': 1, 'sizeY': 1, 'row': 2, 'col': 3, header: '<div>Panel 6</div>', content: '<div class="content">Panel Content<div>' }
]
}@import "node_modules/@syncfusion/ej2-base/styles/material3.css";
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-layouts/styles/material3.css';
.control-section {
margin: 0 auto;
width: 500px;
}
#defaultLayout {
padding: 10px;
}
#defaultLayout .e-panel .e-panel-container .content {
font-weight: 600;
text-align: center;
margin-top: 10px;
line-height: 100%;
}
.e-dashboard-layout.e-control .e-panel .e-panel-container .e-panel-header {
color: rgba(0, 0, 0, 0.61);
}
.e-panel .e-header-text {
padding: 12px 0 12px 0;
}
.e-dashboard-layout.e-control .e-panel:hover {
border: 0px;
}
.e-dashboard-layout.e-control .e-panel .e-panel-header {
font-size: 15px;
font-weight: 500;
height: 37px;
padding: 10px;
vertical-align: middle;
/* text-align: left; */
border-bottom: 0.5px solid rgba(0, 0, 0, .125);
}
.e-panel-header {
padding: 10px;
margin-bottom: 0;
background-color: rgba(0, 0, 0, .03);
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Integrating Syncfusion components as panel content
Dashboard panels commonly display complex data through components like charts, grids, maps, and gauges. Such components can be placed as the panel content by assigning the corresponding component element to the content of the panel.
The following example demonstrates how to integrate EJ2-Chart components as the content for each panel in the dashboard layout component.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DashboardLayoutModule } from '@syncfusion/ej2-angular-layouts'
import { ChartAllModule, AccumulationChartAllModule } from '@syncfusion/ej2-angular-charts'
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
imports: [ DashboardLayoutModule, ChartAllModule, AccumulationChartAllModule],
standalone: true,
selector: 'app-root',
template: `
<div class="control-section">
<ejs-dashboardlayout [columns]="6" #editLayout [cellSpacing]='cellSpacing'>
<e-panels>
<e-panel [sizeX]="3" [sizeY]="2" [row]="0" [col]="0">
<ng-template #header>
<div>Product usage ratio</div>
</ng-template>
<ng-template #content>
<div id="column">
<ejs-chart id="columnChart" height="162px" [primaryXAxis]='primaryXAxis'>
<e-series-collection>
<e-series [dataSource]="chartData" type='Column' xName='month' yName='sales'>
</e-series>
</e-series-collection>
</ejs-chart>
</div>
</ng-template>
</e-panel>
<e-panel [sizeX]="3" [sizeY]="2" [row]="0" [col]="3">
<ng-template #header>
<div>Last year Sales Comparison</div>
</ng-template>
<ng-template #content>
<div id="line">
<ejs-chart id="lineChart" height="162px" [primaryXAxis]='primaryXAxis'>
<e-series-collection>
<e-series [dataSource]="lineData" xName='x' yName='y' type="Line">
</e-series>
</e-series-collection>
</ejs-chart>
</div>
</ng-template>
</e-panel>
<e-panel [sizeX]="3" [sizeY]="2" [row]="2" [col]="0">
<ng-template #header>
<div>Sales increase percentage 1</div>
</ng-template>
<ng-template #content>
<div id="pie">
<ejs-accumulationchart id="pieChart" height="162px" [legendSettings]="legendSettings" [tooltip]='tooltip'>
<e-accumulation-series-collection>
<e-accumulation-series [dataSource]="piechart" xName="x" yName="y" innerRadius="20%"
name="Browser" [dataLabel]='datalabel'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</ng-template>
</e-panel>
<e-panel [sizeX]="3" [sizeY]="2" [row]="2" [col]="3">
<ng-template #header>
<div>Sales increase percentage 2</div>
</ng-template>
<ng-template #content>
<div id="pie1">
<ejs-accumulationchart id="pieChart1" [enableAnimation]="false" height="162px"
[tooltip]='tooltip' [legendSettings]='legendSettings'>
<e-accumulation-series-collection>
<e-accumulation-series [dataSource]="piechart1" xName="x" yName="y" radius="70%"
name="Browser" [dataLabel]='datalabel'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</ng-template>
</e-panel>
</e-panels>
</ejs-dashboardlayout>
</div>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public cellSpacing: number[] = [10, 10];
public chartData: Object[] = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
public primaryXAxis: Object = {
valueType: 'Category'
}
public lineData: any[] = [
{ x: 2013, y: 28 }, { x: 2014, y: 25 },{ x: 2015, y: 26 }, { x: 2016, y: 27 },
{ x: 2017, y: 32 }, { x: 2018, y: 35 }
];
public piechart: any[] = [{ x: 'TypeScript', y: 13, text: 'TS 13%' }, { x: 'React', y: 12.5, text: 'Reat 12.5%' },{ x: 'MVC', y: 12, text: 'MVC 12%' },{ x: 'Core', y: 12.5, text: 'Core 12.5%' },{ x: 'Vue', y: 10, text: 'Vue 10%' },{ x: 'Angular', y: 40, text: 'Angular 40%' }];
public piechart1: any[] = [
{ 'x': 'Chrome', y: 37, text: '37%' },
{ 'x': 'UC Browser', y: 17, text: '17%' },
{ 'x': 'iPhone', y: 19, text: '19%' },
{ 'x': 'Others', y: 4, text: '4%' },
{ 'x': 'Opera', y: 11, text: '11%' },
{ 'x': 'Android', y: 12, text: '12%' }
];
public legendSettings: Object = {
visible: false
};
tooltip: any;
datalabel: any;
}@import "node_modules/@syncfusion/ej2-base/styles/material3.css";
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-layouts/styles/material3.css';
.control-section {
margin: 0 auto;
width: 600px;
}
.e-dashboard-layout.e-control .e-panel .e-panel-container .e-panel-header {
color: rgba(0, 0, 0, 0.61);
}
.e-panel .e-header-text {
padding: 12px 0 12px 0;
}
.e-dashboard-layout.e-control .e-panel:hover {
border: 0px;
}
.e-dashboard-layout.e-control .e-panel .e-panel-header {
font-size: 15px;
font-weight: 500;
height: 37px;
padding: 10px;
vertical-align: middle;
border-bottom: 0.5px solid rgba(0, 0, 0, .125);
}
.e-panel-header {
padding: 10px;
margin-bottom: 0;
background-color: rgba(0, 0, 0, .03);
}
.e-dashboard-layout.e-control .e-panel .e-panel-header {
height: 30px
}
.e-dashboard-layout.e-control .e-panel .e-panel-header div {
text-align: center;
}
.header {
padding: 5px;
display: inline-block;
}
.e-panel-content {
height: 162px;
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Refer to the Angular Dashboard Layout feature tour page for its groundbreaking feature representations. Also explore our Angular Dashboard Layout example to learn how to present and manipulate data.