Custom event emitter in Angular Calendar component

27 Sep 20232 minutes to read

The two-way binding in Calendar can also be achieved using the custom event binding and property binding in the controls present in two different components. To create custom event, we need to create an instance of event emitter.

In the following example, property binding is used to share the data from the parent component to the child component using @input directive and custom event binding is used to share the data from the child component by using @output directive.

app.component.ts

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

@Component({
    selector: 'app-root',
    template: `
  <div class="parentelement">
  <span><h4>Parent Component</h4></span>
   <div class="datevalue">
   <ejs-calendar id="calendar" #calendar (change)="deposit()" [value]="value" width="200px"></ejs-calendar>
   </div>
   </div>
   <child [xvalue]="value" (valueChange)="valuecheck($event)"> </child>
  `,
})
export class ParentComponent {
    @ViewChild('calendar')
    public calendar?: CalendarComponent;
    value: Date;
    constructor() {
        this.value = new Date("2/1/2020");
    }
    deposit() {
        this.value = ((this.calendar) as CalendarComponent).value;
    }
    valuecheck(args: any) {
        this.value = args;
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the CalendarModule for the Calendar component
import { CalendarModule } from '@syncfusion/ej2-angular-calendars';
import { ParentComponent }  from './app.component';
import { ChildComponent }  from './child.component';

@NgModule({
  //declaration of ej2-angular-calendars module into NgModule
  imports:      [ BrowserModule, CalendarModule ],
  declarations: [ ParentComponent,  ChildComponent ],
  bootstrap:    [ ParentComponent]
})
export class AppModule { }

main.ts

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

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);