How do you get dynamically added DOM elements?

Question

I have a filter popup in my project that is put into template as selector() and visibility controlled with an ngIf directive, my end goal is to hide filter when user clicks outside it, I achieved this partly by:-

First watching the DOM click events
Getting the filter element by injecting elementRef in it and testing if the users click area contains it.

Something like:

this.filterElement.nativeElement.container(the_clicked_area)

This works fine, however I have a date field in my filter form, ngx-bootstrap datepicker which shows a date picker on click, now when the user selects a data the filter element considers it an 'outside click' since the date picker is not within it's elementRef, how can I prevent hiding the filter on datepicker selection?

The first solution I can think of is to get the datepicker and then ignore on it in my DOM click event handler method, but I don't know how to get the datepicker in a usable way as a elementRef on whom I can check something like nativeELement.container(datePicker),

I tried getting it using means provided here: How can I select an element in a component template?

But I just get null in eleRef.nativeElement.querySelector method despite putting the .bs-datepicker-container container that is on the datepicker in, I tried @ContentChildren too and @ViewChild too but to no avail,

After some inspecting, I found that maybe the datepicker is actually appended on body, so the question now is

How do you get from within a component and element on the body?

In the click callback of the picker do ---> event.stopPropagation() u can try to stop the bubbling of the event. — sagat, Aug 10 '19 at 13:38
Can someone explain me why the downvotes? Question is not clear? — Tony, Aug 27 '19 at 06:22

score 0 · Accepted Answer · edited Nov 15 '19 at 22:13

So the solution was first getting the datepicker by document.getElementsByTagName('bs-datepicker-container').item(0)

The .item(index) returns an HTML Element you can run the .contains(event.target) check in handler of the click event

Then it's simple ignoring or taking action on it's click.

EDIT: In the question in this part "But I just get null in eleRef.nativeElement.querySelector method despite putting the .bs-datepicker-container container that is on the datepicker in, I tried @ContentChildren too and @ViewChild too but to no avail,"

It returned null because the datepicker was appended on the body tag outside app-root tag where Angular bootstraps, so getting it in the filter element's EleRef was not possible since it's not within filter or event app-root

How do you get dynamically added DOM elements?

1 Answers1