Category / Section
Render Syncfusion Angular components as Dynamic content in Dashboard Layout
8 mins read
This knowledge base article explains how to render multiple components dynamically on the Angular Dashboard Layout component.
Get Started with Angular Dashboard Layout
Refer to this getting started to create an Angular Dashboard Layout component- https://ej2.syncfusion.com/angular/documentation/dashboard-layout/getting-started/
Render Dashboard Layout component
Render a dashboard Layout component using `ng-template`.
[app.component.html]
<div class="control-section"> <div style="padding:5px;text-align: right;"> <button id="add" class="e-btn e-info" (click)="addPanel()"> Add Panel </button> </div> <ejs-dashboardlayout id="default_dashboard" #default_dashboard columns="2" [allowResizing]="true" [cellSpacing]="cellSpacing" > <e-panels> <e-panel *ngFor="let panel of panelsData" [id]="panel.id" [sizeX]="panel.sizeX" [sizeY]="panel.sizeY" [row]="panel.row" [col]="panel.col" > <ng-template #content> <span style="float:right; margin-right:40px;padding-top:10px;font-weight: bold;" (click)="addWidget($event)" >ⓘ</span > <span id="close" class="e-template-icon e-close-icon" (click)="onCloseIconHandler($event)" ></span> <div class="e-panel-container"> <div class="text-align" [id]="panel.index"> <ng-template #template> </ng-template> </div></div ></ng-template> </e-panel> </e-panels> </ejs-dashboardlayout> <div id="template"></div> <div id="modalDialog"></div> <div id="dialogcontent"> <div> <div id="line_template"> <p class="dialog-text">Line Chart (1x1)</p> </div> <div id="bar_template"> <p class="dialog-text">Bar Chart (1x1)</p> </div> <div id="grid_template"> <p class="dialog-text">Grid (2x1)</p> </div> </div> </div> </div>
[app.component.ts]
import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { ListBoxComponent } from '@syncfusion/ej2-angular-dropdowns';
import { DragAndDropEventArgs, NodeClickEventArgs, TreeViewComponent } from '@syncfusion/ej2-angular-navigations';
import { closest } from '@syncfusion/ej2-base';
import { AnalytesDragAndDrop } from './analytes-drag-and-drop';
import {
Inject,
ViewChildren,
ViewContainerRef,
QueryList,
ComponentFactoryResolver,
ComponentRef,
} from '@angular/core';
import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { ListBoxComponent } from '@syncfusion/ej2-angular-dropdowns';
import { DragAndDropEventArgs, NodeClickEventArgs, TreeViewComponent } from '@syncfusion/ej2-angular-navigations';
import { closest } from '@syncfusion/ej2-base';
import { AnalytesDragAndDrop } from './analytes-drag-and-drop';
import {
Inject,
ViewChildren,
ViewContainerRef,
QueryList,
ComponentFactoryResolver,
ComponentRef,
} from '@angular/core';
import {
DashboardLayoutComponent,
PanelModel,
} from '@syncfusion/ej2-angular-layouts';
import { Dialog } from '@syncfusion/ej2-popups';
import { Chart, LineSeries, Category } from '@syncfusion/ej2-charts';
import { Button } from '@syncfusion/ej2-buttons';
import { ChartComponent } from './chart.component';
import { BarComponent } from './bar.component';
import { GridComponent } from './grid.component';
Chart.Inject(LineSeries, Category);
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
@ViewChild('default_dashboard')
public dashboard: DashboardLayoutComponent;
componentRef: ComponentRef<ChartComponent>;
componentRefOne: ComponentRef<BarComponent>;
componentRefTwo: ComponentRef<GridComponent>;
// @ViewChild('template', { read: ViewContainerRef })
// viewTemplate: ViewContainerRef;
@ViewChildren('template', { read: ViewContainerRef })
viewTemplate: QueryList<ViewContainerRef>;
constructor(private cfr: ComponentFactoryResolver) {}
public count: number = 8;
public dialogObj: Dialog;
public target: any;
public cellSpacing: number[] = [10, 10];
public data: 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 axis: Object = {
valueType: 'Category',
};
public panelsData: any = [
{
index: 0,
id: 'one',
sizeX: 1,
sizeY: 1,
row: 0,
col: 0
},
{
index: 1,
id: 'two',
sizeX: 3,
sizeY: 1,
row: 0,
col: 1
},
{
index: 2,
id: 'three',
sizeX: 2,
sizeY: 1,
row: 1,
col: 0
}
];
addPanel(): void {
let panel: PanelModel[] = [
{
id: this.count.toString(),
sizeX: 1,
sizeY: 1,
row: 0,
col: 0,
content:
'<span id="close" class="e-template-icon e-close-icon"></span><div class="text-align">' +
this.count.toString() +
'</div>'
},
];
this.dashboard.addPanel(panel[0]);
let closeIcon: any = document
.getElementById(this.count.toString())
.querySelector('.e-close-icon');
closeIcon.addEventListener('click', this.onCloseIconHandler.bind(this));
this.count = this.count + 1;
}
onCloseIconHandler(event: any): void {
if ((<HTMLElement>event.target).offsetParent) {
this.dashboard.removePanel((<HTMLElement>event.target).offsetParent.id);
}
}
...
Render Angular Grid and Chart components
Render Data Grid, Line Chart, and Bar Chart components inside the app folder using Angular `template`.
[grid.component.ts]
import {
Component,
ViewEncapsulation,
Input,
Inject,
ViewChild,
} from '@angular/core';
@Component({
selector: 'grid-root',
template: `<ejs-grid [dataSource]='gridData'>
<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>`,
encapsulation: ViewEncapsulation.None,
})
export class GridComponent {
@Input() gridData: Object[];
ngOnInit(): void {}
}
[chart.component.ts]
import {
Component,
ViewEncapsulation,
Input,
Inject,
ViewChild,
} from '@angular/core';
@Component({
selector: 'chart-root',
template: `<ejs-chart
[primaryXAxis]="primaryXAxis"
width="100%"
height="100%"
>
<e-series-collection>
<e-series
[dataSource]="chartData"
type="Line"
xName="month"
yName="sales"
name="Sales"
></e-series>
</e-series-collection>
</ejs-chart>`,
encapsulation: ViewEncapsulation.None,
})
export class ChartComponent {
@Input() primaryXAxis: Object;
@Input() chartData: Object[];
ngOnInit(): void {
// Data for chart series
}
}
[bar.component.ts]
import {
Component,
ViewEncapsulation,
Input,
Inject,
ViewChild,
} from '@angular/core';
@Component({
selector: 'bar-root',
template: `<ejs-chart
style="display:block;"
[chartArea]="chartArea"
width="100%"
height="100%"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[title]="title"
[tooltip]="tooltip"
>
<e-series-collection>
<e-series
[dataSource]="data"
type="Bar"
xName="x"
yName="y"
name="Imports"
[marker]="marker"
>
</e-series>
<e-series
[dataSource]="data1"
type="Bar"
xName="x"
yName="y"
name="Exports"
[marker]="marker"
>
</e-series>
</e-series-collection>
</ejs-chart>`,
encapsulation: ViewEncapsulation.None,
})
export class BarComponent {
public chartArea: Object = {
border: {
width: 0,
}
};
//Initializing Chart Width
@Input() data: Object[];
@Input() data1: Object[];
//Initializing Marker
public marker: Object = {
dataLabel: {
visible: true,
position: 'Top',
font: {
fontWeight: '600',
color: '#ffffff',
},
},
};
//Initializing Primary X Axis
public primaryXAxis: Object = {
valueType: 'Category',
title: 'Food',
interval: 1,
majorGridLines: { width: 0 },
};
//Initializing Primary Y Axis
public primaryYAxis: Object = {
labelFormat: '{value}B',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 },
majorTickLines: { width: 0 },
lineStyle: { width: 0 },
labelStyle: {
color: 'transparent',
},
};
public tooltip: Object = {
enable: true,
};
// custom code end
public title: string = 'UK Trade in Food Groups - 2015';
constructor() {
//code
}
}
Render dynamic components as content of the Dashboard Layout
Render Angular component as panel content of the Dashboard Layout based on the selection using Angular’s `ComponentFactoryResolver’.
[app.component.ts]
export class AppComponent {
...
addWidget(event) {
this.target = event.target.closest('.e-panel').querySelector('.text-align');
if (this.dialogObj == undefined) {
this.dialogObj = new Dialog({
width: '500px',
header: 'Add a widget',
showCloseIcon: true,
animationSettings: { effect: 'Zoom' },
content: document.getElementById('dialogcontent'),
target: document.getElementById('target'),
isModal: true,
height: '260px',
visible: false,
});
this.dialogObj.appendTo('#modalDialog');
}
this.dialogObj.show();
document.getElementById('line_template').onclick = () => {
this.dialogObj.hide();
//Get the panel index.
var count = this.target.id;
this.viewTemplate.map((vcr: ViewContainerRef, index: number) => {
//Check whether the panel index matches reference index.
if (index == count && this.target.innerText == '') {
const componentFactory =
this.cfr.resolveComponentFactory(ChartComponent);
this.componentRef = vcr.createComponent(componentFactory);
this.componentRef.instance.chartData = this.data;
this.componentRef.instance.primaryXAxis = this.axis;
}
});
};
document.getElementById('bar_template').onclick = () => {
this.dialogObj.hide();
var count = this.target.id;
this.viewTemplate.map((vcr: ViewContainerRef, index: number) => {
if (index == count && this.target.innerText == '') {
const componentFactory =
this.cfr.resolveComponentFactory(BarComponent);
this.componentRefOne = vcr.createComponent(componentFactory);
this.componentRefOne.instance.data = [
{ x: 'Egg', y: 2.2 },
{ x: 'Fish', y: 2.4 },
{ x: 'Misc', y: 3 },
{ x: 'Tea', y: 3.1 },
];
this.componentRefOne.instance.data1 = [
{ x: 'Egg', y: 1.2 },
{ x: 'Fish', y: 1.3 },
{ x: 'Misc', y: 1.5 },
{ x: 'Tea', y: 2.2 },
];
}
});
};
document.getElementById('grid_template').onclick = () => {
this.dialogObj.hide();
var count = this.target.id;
this.viewTemplate.map((vcr: ViewContainerRef, index: number) => {
if (index == count && this.target.innerText == '') {
const componentFactory =
this.cfr.resolveComponentFactory(GridComponent);
this.componentRefTwo = vcr.createComponent(componentFactory);
this.componentRefTwo.instance.gridData = [
{
OrderID: 10248,
CustomerID: 'VINET',
EmployeeID: 5,
OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier',
ShipCity: 'Reims',
ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ',
ShipPostalCode: '51100',
ShipCountry: 'France',
Freight: 32.38,
Verified: !0,
},
{
OrderID: 10249,
CustomerID: 'TOMSP',
EmployeeID: 6,
OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten',
ShipCity: 'Münster',
ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ',
ShipPostalCode: '44087',
ShipCountry: 'Germany',
Freight: 11.61,
Verified: !1,
},
{
OrderID: 10250,
CustomerID: 'HANAR',
EmployeeID: 4,
OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes',
ShipCity: 'Rio de Janeiro',
ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ',
ShipPostalCode: '05454-876',
ShipCountry: 'Brazil',
Freight: 65.83,
Verified: !0,
},
];
}
});
};
}
}
GitHub sample - https://github.com/SyncfusionExamples/angular-dashboard-layout-dynamic-components
