I have a component named search_detail which has another component inside it named calendar,
SearchDetail_component.html
<li class="date"> <div class="btn-group dropdown" [class.open]="DatedropdownOpened"> <button type="button" (click)="DatedropdownOpened = !DatedropdownOpened" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" [attr.aria-expanded]="dropdownOpened ? 'true': 'false'"> Date <span class="caret"></span> </button> <ul class="dropdown-menu default-dropdown"> <calendar ></calendar> <button > Cancel </button> <button (click)="setDate(category)"> Ok </button> </ul> </div> </li>
SearchDetail_component.ts
import 'rxjs/add/observable/fromEvent'; @Component({ selector: 'searchDetail', templateUrl: './search_detail.component.html', moduleId: module.id })
Calendar.component.ts
import { Component, Input} from '@angular/core'; @Component({ moduleId:module.id, selector: 'calendar', templateUrl: './calendar.component.html' }) export class CalendarComponent{ public fromDate:Date = new Date(); private toDate:Date = new Date(); private events:Array<any>; private tomorrow:Date; private afterTomorrow:Date; private formats:Array<string> = ['DD-MM-YYYY', 'YYYY/MM/DD', 'DD.MM.YYYY', 'shortDate']; private format = this.formats[0]; private dateOptions:any = { formatYear: 'YY', startingDay: 1 }; private opened:boolean = false; public getDate():number { return this.fromDate.getDate() || new Date().getTime(); } }
I want to access the startdate and enddate on click of the ok button in the search detail page. how can i do?
Advertisement
Answer
Register the EventEmitter
in your child component as the @Output
:
@Output() onDatePicked = new EventEmitter<any>();
Emit value on click:
public pickDate(date: any): void { this.onDatePicked.emit(date); }
Listen for the events in your parent component’s template:
<div> <calendar (onDatePicked)="doSomething($event)"></calendar> </div>
and in the parent component:
public doSomething(date: any):void { console.log('Picked date: ', date); }
It’s also well explained in the official docs: Component interaction.