title: ng2-daterangepicker - set startDate and endDate programatically
body: <p>i hope someone can help me. I Tried to figure it out, but i didn't find any way.</p>
  
  <p>I am using this daterangepicker: <a href="https://github.com/evansmwendwa/ng2-daterangepicker" rel="nofollow noreferrer">ng2-daterangepicker</a></p>
  
  <p>I would like to set the value of my ng2-daterangepicker programatically in my component.ts file.</p>
  
  <p>I found this solution: <a href="https://github.com/evansmwendwa/ng2-daterangepicker#daterangepicker-methods" rel="nofollow noreferrer">Daterangepicker methods</a></p>
  
  <p>but that solution works for me only, if i just have 1 daterangepicker in my component.html file.</p>
  
  <p>My problem is, that i have 2 daterangepickers and I can't set the value of the other daterangepicker programatically.</p>
  
  <p>Thanks in advance!</p>
  
  <p><strong>MY CODE:</strong></p>
  
  <p><strong>app.component.html:</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;button class="btn btn-primary" (click)="resetDate1()"&gt;Reset first&lt;/button&gt;
      &lt;input type="text" name="daterangeInput" daterangepicker [options]="options1" (selected)="selectedDate($event)" /&gt;
  
      &lt;button class="btn btn-primary" (click)="resetDate2()"&gt;Reset second&lt;/button&gt;
      &lt;input type="text" name="daterangeInput" daterangepicker [options]="options2" (selected)="selectedDate($event)" /&gt;
  
      &lt;button class="btn btn-primary" (click)="updateDateRange()"&gt;Reset both&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>export class AppComponent {
  
      @ViewChild(DaterangePickerComponent) private picker1: DaterangePickerComponent;
      @ViewChild(DaterangePickerComponent) private picker2: DaterangePickerComponent;
  
      public options1: any = {
          locale: { format: 'YYYY-MM-DD' },
          alwaysShowCalendars: false,
      };
  
      public options2: any = {
          locale: { format: 'YYYY-MM-DD' },
          alwaysShowCalendars: false,
      };
  
      public selectedDate(value: any) {
          console.log(value);
      }
  
      resetDate1() {
          this.picker1.datePicker.setStartDate('2018-03-25');
          this.picker1.datePicker.setEndDate('2018-03-25');
      }
  
      resetDate2() {
          this.picker2.datePicker.setStartDate('2018-03-25');
          this.picker2.datePicker.setEndDate('2018-03-25');
      }
  
      updateDateRange() {
          this.picker1.datePicker.setStartDate('2017-03-27');
          this.picker1.datePicker.setEndDate('2017-04-08');
          this.picker2.datePicker.setStartDate('2017-03-28');
          this.picker2.datePicker.setEndDate('2017-04-08');
      }
  }
  </code></pre>