title: I have two datepicker in a component, I want to emit {startDate: startDateValue, endDate: endDateValue} if the date values are not empty
body: <p>Here is what I have tried but I get thesame date value for both inputs</p>
  
  <pre><code>export class DateComponent implements OnInit {
    @Input() startDate: string;
    @Input() endDate: string;
    @Output() sendDate: EventEmitter&lt;any&gt; = new EventEmitter();
    @Output() emitDate: EventEmitter&lt;any&gt; = new EventEmitter();
  
    startMinDate: Date;
    startMaxDate: Date;
    endMinDate: Date;
    endMaxDate: Date;
  
  
    constructor(private moment: MomentService) {
      this.startMaxDate = this.moment.getMaxDate().toDate();
      this.startMinDate = this.moment.getMinDate().toDate();
      this.endMaxDate = this.moment.getMaxDate().toDate();
      this.endMinDate = this.moment.getMinDate().toDate();
    }
  
    ngOnInit() {}
  
    onChange({ value }) {
      const ISOString = value.toISOString();
      this.sendDate.emit(ISOString);
    }
  
    changedDate({ value }) {
      const ISOString = value.toISOString();
      this.emitDate.emit(ISOString);
    }
  }
  </code></pre>
  
  <p><strong><em>Parent Component.html, I need to bind these two output functions to the child component</em></strong></p>
  
  <pre><code>&lt;app-date [endDate]="endDate" (sendDate)="endDate = $event" [startDate]="startDate"
            (emitDate)="startDate=$event"&gt;&lt;/app-date&gt;
  </code></pre>
  
  <p>ChildComponent.html</p>
  
  <pre><code>&lt;input matInput [matDatepicker]="picker" [value]="endDate" [min]="endMinDate" [max]="endMaxDate"
              (dateChange)="changedDate($event)"&gt;
  </code></pre>
  
  <pre><code>&lt;input matInput [matDatepicker]="picker1" [value]="startDate" [min]="startMinDate" [max]="startMaxDate"
              (dateChange)="onChange($event)"&gt;
  </code></pre>