Angular2单击动态生成的元素

Question

I'm using a 3rd party module (a datepicker) which resolves itself as the below in the DOM (my written html only has the datepicker element)

<material-datepicker>
  <div>
    <input>

I want to be able to programmatically execute a click on that input. I've tried attaching a local var to the datepicker element but of course that item isn't listening for a click. I dug in and ended up with the below which I really thought should work, but isn't...

 const ref = this.datepicker.elementRef;
 const input = ref.nativeElement.querySelector('input');
 console.log('INPUT', input)
 input.click();

The output of input above is a legitmate looking input element

<input _ngcontent-c2="" class="datepicker__input ng-untouched ng-pristine ng-valid" readonly="true" ng-reflect-ng-style="[object Object]" ng-reflect-model="2017/06/11" placeholder="Select a date" style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); border: 1px solid rgb(218, 218, 218);">

However the click doesn't do anything. I looked into the module itself and it doesn't do anything fancy on the click event so it should work.

I can't provide a jsfiddle or anything because it relies on this 3rd party module, https://github.com/koleary94/Angular-2-Datepicker

Answer 1

I would use picker.onInputClick() method:

template.html

<material-datepicker #picker [(date)]="yourModelDate"></material-datepicker>
<button (click)="picker.onInputClick(); $event.stopPropagation()">Open manually</button>

Note $event.stopPropagation() is required here because datepicker handles document click

Plunker Example