Open and Close the Sidebar in Angular Sidebar component

import { Component, ViewChild } from '@angular/core';
import { SidebarComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
@ViewChild('sidebar') sidebar: SidebarComponent;
public open() {
   console.log("Sidebar Opened");
}
public close() {
    console.log("Sidebar Closed");
}
openClick() {
    this.sidebar.show();
}
toggleClick() {
    this.sidebar.toggle();
}
closeClick() {
    this.sidebar.hide();
}
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SidebarModule } from '@syncfusion/ej2-angular-navigations';
import { AppComponent } from './app.component';

@NgModule({
    imports: [SidebarModule, BrowserModule],
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);

<ejs-sidebar id="default-sidebar" #sidebar (open)="open($event)" (close)="close($event)">
    <div class="title"> Sidebar content</div>
    <div class="sub-title">
        Click the button to close the Sidebar.
    </div>
    <div class="center-align">
        <button ejs-button id="close" (click)="closeClick()" class="e-btn close-btn">Close Sidebar</button>
    </div>
</ejs-sidebar>
<div>
    <div>
        <div class="title">Main content</div>
        <div class="sub-title"> Click the button to Open the Sidebar.
            <div style="padding:20px" class="center-align">
                <button ejs-button id="open" class="e-btn e-info" (click)="openClick()">Open Sidebar</button>
            </div>

        </div>
        <div class="sub-title"> Click the button to open/close the Sidebar.
            <div style="padding:20px" class="center-align">
                <button ejs-button id="toggle" class="e-btn e-info" (click)="toggleClick()">Toggle Sidebar</button>
            </div>

        </div>
    </div>
</div>

#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}
/* sample-level styles */

 .center-align {
    text-align: center;
    padding: 20px;
}

.title {
    text-align: center;
    font-size: 20px;
    padding: 15px;
}

.sub-title {
    text-align: center;
    font-size: 16px;
    padding: 10px;
}

.center {
    text-align: center;
    display: none;
    font-size: 13px;
    font-weight: 400;
    margin-top: 20px;
}

#default-sidebar {
    background-color: rgb(25, 118, 210);
    color: #ffffff;
}

.close-btn:hover {
    /* csslint ignore:start */ 
    color: rgba(0, 0, 0, 0.87);
    background-color: #fafafa;
    /* csslint ignore:end */
}

#default-sidebar {
    visibility: hidden;
}
#default-sidebar.e-sidebar {
    visibility: visible;
}
/* sample-level styles */