Search results

Custom event Emitter in Angular DatePicker component

20 Apr 2021 / 1 minute to read

The two-way binding in DatePicker 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 to the parent component by using @output directive.

Source
Preview
app.component.ts
app.module.ts
child.component.ts
main.ts
styles.css
Copied to clipboard
import { Component, ViewChild } from '@angular/core';
import { DatePickerComponent } from '@syncfusion/ej2-angular-calendars';


@Component({
    selector: 'app-root',
    template: `
  <div class="parentelement">
   <div class="datevalue">
   <ejs-datepicker id="datepicker" #date (change)="deposit()" placeholder="Parent component" floatLabelType="Always" [value]="value" width="200px"></ejs-datepicker>
   </div>
   </div>
   <child [xvalue]="value" (valueChange)="valuecheck($event)"> </child>
  `,
})
export class ParentComponent {
    @ViewChild('date')
    public Date: DatePickerComponent;
    value: Date;
    constructor() {
        this.value = new Date("2/1/2020");
    }
    deposit() {
        this.value = this.Date.value;
    }
    valuecheck(args: any) {
        this.value = args;
    }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the DatePickerModule for the DatePicker component
import { DatePickerModule } 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, DatePickerModule ],
  declarations: [ ParentComponent,  ChildComponent ],
  bootstrap:    [ ParentComponent]
})
export class AppModule { }
Copied to clipboard
import {Component, EventEmitter, Input, Output, ViewChild} from '@angular/core'
import { DatePickerComponent } from '@syncfusion/ej2-angular-calendars';

@Component({
  selector: 'child',
  template: `
  <br>
  <div class="childelement"> 
    <ejs-datepicker id="date2" #child (change)="ValueChange()" placeholder="Child component" floatLabelType="Always" [value]="xvalue" width="200px"></ejs-datepicker>
  </div>
  `,
})
export class ChildComponent {
  @ViewChild('child')
  public DateValue: DatePickerComponent;
  @Input() xvalue: Date;
  @Output() valueChange = new EventEmitter();

  ValueChange() {
  this.xvalue = this.DateValue.value;
  this.valueChange.emit(this.DateValue.value);
  }
}
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}

#element {
    display: block;
    height: 350px;
}

#wrapper {
    width: 550px;
    margin: 0 auto;
}

child, .parentelement{
    display:inline-block;
}
child{
    margin-left:100px;
}