Floating Panels in Angular Dashboard Layout component

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

@Component({
    selector: 'app-root',
    styleUrls: ['app/default-style.css'],
    templateUrl: 'app/app.template.html',
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild('defaultLayout') dashboard: DashboardLayoutComponent;
    @ViewChild('toggleBtn') toggleBtn: ButtonComponent;
    public cellSpacing: any = [10, 10];
    public allowFloating: boolean = false;
    public cellAspectRatio: number = 100/75;
    public panels: any = [
    {'sizeX': 2, 'sizeY': 2, 'row': 1, 'col': 0, content:'<div class="content">0</div>'},
    {'sizeX': 2, 'sizeY': 2, 'row': 2, 'col': 2, content:'<div class="content">1</div>'},
    {'sizeX': 2, 'sizeY': 2, 'row': 3, 'col': 4, content:'<div class="content">2</div>'}
    ];

    btnClick() {
        if (this.toggleBtn.content == "Disable Floating and Reset") {
            this.toggleBtn.content = 'Enable Floating';
            this.dashboard.allowFloating = false;
            this.dashboard.panels = this.panels;
        } else {
            this.toggleBtn.content = 'Disable Floating and Reset';
            this.dashboard.allowFloating = true;
        }
    }
}

<div class="control-section">
    <div class="inline" id="control">
        <ejs-dashboardlayout id='dashboard_default' #defaultLayout [columns]='6' [cellSpacing]='cellSpacing'
            [panels]='panels' [allowFloating]='allowFloating' [cellAspectRatio]='cellAspectRatio'>
        </ejs-dashboardlayout>
    </div>
    <div class="inline" id="properties">
        <button ejs-button id='toggle' #toggleBtn cssClass="e-flat e-primary e-outline" [isToggle]="true" (click)='btnClick($event)' content="Enable Floating"></button>
    </div>
</div>

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the DashboardLayoutModule for the Dashboard Layout component
import { DashboardLayoutModule } from '@syncfusion/ej2-angular-layouts';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    //declaration of ej2-angular-layouts module into NgModule
    imports: [BrowserModule, DashboardLayoutModule, ButtonModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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

#container {
    margin: 0 auto;
    width: 600px;
  }
  
  #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;
  }