<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' columns="5" #default_dashboard [cellSpacing]='cellSpacing'
        [allowResizing]='true'>
        <div id="one" class="e-panel" data-row="0" data-col="0" data-sizeX="1" data-sizeY="1">
            <span id="close" class="e-template-icon e-close-icon" (click)="onCloseIconHandler($event)"></span>
            <div class="e-panel-container">
                <div class="text-align">0</div>
            </div>
        </div>
    </ejs-dashboardlayout>
</div>

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { DashboardLayoutComponent, PanelModel } from '@syncfusion/ej2-angular-layouts';

/**

 * Default component
 */
@Component({
    selector: 'app-root',
    styleUrls: ['app.component.css'],
    templateUrl: 'app.component.html',
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild('default_dashboard')
    public dashboard: DashboardLayoutComponent;
    constructor() {
        
    }
    public count: number = 8;
    public cellSpacing: number[] = [10, 10];
    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);
        }
    }
   
}