title: How to Pass data from child to parent component Angular
body: <p>I have a component named search_detail which has another component inside it named calendar, </p>
  
  <p><strong>SearchDetail_component.html</strong></p>
  
  <pre><code> &lt;li class="date"&gt;
     &lt;div class="btn-group dropdown" [class.open]="DatedropdownOpened"&gt;
     &lt;button type="button" (click)="DatedropdownOpened = !DatedropdownOpened"   class="btn btn-default dropdown-toggle" data-toggle="dropdown"
  aria-haspopup="true" [attr.aria-expanded]="dropdownOpened ? 'true': 'false'"&gt;
        Date &lt;span class="caret"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;ul class="dropdown-menu default-dropdown"&gt;
       &lt;calendar  &gt;&lt;/calendar&gt;
       &lt;button &gt; Cancel &lt;/button&gt;
       &lt;button (click)="setDate(category)"&gt; Ok &lt;/button&gt;
     &lt;/ul&gt;                            
   &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p><strong>SearchDetail_component.ts</strong></p>
  
  <pre><code>import 'rxjs/add/observable/fromEvent';
  @Component({
      selector: 'searchDetail',
      templateUrl: './search_detail.component.html',
      moduleId: module.id
  
  })
  </code></pre>
  
  <p><strong>Calendar.component.ts</strong></p>
  
  <pre><code>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&lt;any&gt;;
        private tomorrow:Date;
        private afterTomorrow:Date;
        private formats:Array&lt;string&gt; = ['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();
        }
      }
  </code></pre>
  
  <p>I want to access the startdate and enddate on click of the ok button in the search detail page. how can i do?</p>