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

Question

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.

Any help will be appreciate

Answer 1

Instead of using ViewChild you can use ViewChildren Something like @ViewChildren(DaterangepickerDirective) pickerDirectiveAll: Query Then in your (click)="openDatepicker(datePiker) you need to loop through pickerDirectiveAll and finds your specific item.

• find item (in think its working if u compare by this.pickerDirectiveAll[i].viewContainerRef == datePiker) then open: this.pickerDirectiveAll[i].open();

But it's not so elegant solution...