Get started with ng-bs-daterangepicker CDN

import { Component } from '@angular/core';

@Component({
  selector: 'app-date-picker',
  template: `
    <div style="margin: 20px;">
      <input [(ngModel)]="selectedRange" class="form-control" type="text" placeholder="Select date range">
      <button type="button" class="btn btn-primary" (click)="showCalendar($event)">Show Calendar</button>
      <ng-bs-daterangepicker [(ngModel)]="selectedRange" #bsDatePicker class="form-control" (dateChange)="onDateChange($event)"></ng-bs-daterangepicker>
    </div>
  `
})
export class DatePickerComponent {
  selectedRange: Date[];

  constructor() {
    this.selectedRange = [new Date(), new Date()];
  }

  showCalendar(event: MouseEvent) {
    this.bsDatePicker.show();
  }

  onDateChange(event: any) {
    this.selectedRange = event.nativeEvent.range;
  }
}