How to open ngx-daterangepicker-material outside button/icon if multiple date range picker is available in same form

[usubhu]

Describe the bug I want to open my ngx-daterangepicker-material by clicking out side of any button/icon. i know ngx-daterangepicker-material provide the facility by using

@ViewChild(DaterangepickerDirective, { static: false }) pickerDirective: DaterangepickerDirective. .... openDatepicker() {

this.pickerDirective.open();

} But my problem is not resolved with above code as I have a multiple date range picker in my form. When i tried with the above code .it will open the date range picker but the value is set only on first date range picker. not on particular date range which I clicked. Please remember my form is dynamic and i can not add the template like #dateRangepickertemplate so that i can get is by adding this id on viewchild as if add this template id for one control , same template id will be added on all the daterangepicker control

Screenshots If applicable, add screenshots to help explain your problem.

[haykoaghababyan]

@ViewChild(DaterangepickerDirective, { static: false }) pickerDirective: DaterangepickerDirective;

openDatepicker() { this.pickerDirective.open(); }

I tried this code, but didn't work

[techleaddev]

Hi there, you can use ref element to do it Ex:

 <input type="text" ngxDaterangepickerMd [timePicker]="true" class="form-control"
                                        [timePickerIncrement]="15" [timePicker24Hour]="true"
                                        [locale]="{format: 'DD/MM/YYYY HH:mm:ss', firstDay: 1}" [singleDatePicker]="true"
                                        [minDate]="minDate"
                                        formControlName="reminderDate1"
                                        #inf
                                        [autoApply]="true">
                                    <div class="input-group-append">
                                        <button (click)="openDatepicker(inf)" class="ngx-daterangepicker-action btn btn-outline-secondary" type="button">
                                            <fa-icon [icon]="faCalendarAlt" (click)="openDatepicker(inf)" class="ngx-daterangepicker-action"></fa-icon>
                                        </button>
                                    </div>

 openDatepicker(ref: any): void {
    ref.click()
  }
  openDatepicker2(ref: any): void {
    ref.click()
  }