Date Selection

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

@Component({
    selector: 'app-root',
    template: `<ejs-calendar #ejCalendar [value]='dateValue' (change)='onChange($event)'></ejs-calendar>
        <p id=output style="margin-left:18%; margin-left: 31%;word-wrap: break-word;"></p>`
})

export class AppComponent {
    @ViewChild('ejCalendar') ejCalendar: CalendarComponent;
    public dateValue: Date = new Date();
    constructor() {
    }
    ngAfterViewInit(): void {
        document.getElementById('output').textContent = "" + this.ejCalendar.value;
    }
    onChange(args) {
        document.getElementById('output').textContent = "" + args.value;
    }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//Syncfusion ej2-angular-calendars module
import { CalendarModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';


/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        CalendarModule //declaration of ej2-angular-calendars module into NgModule
    ],
    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);