I have an element on a page in my Angular 8 Project.

This element has an attribute of 'data-convo-id' with a unique string attached to it.

On this element is a click function that will load data based off of the data attribute that is also on that element (as described above).

Because I won't strictly have access to this element, I need a way of finding the element on this page using 'document.querySelector()', and then triggering a click on it. This in turn will fire off the function attached to that element, which will load the data as requested.

I've tried two different methods of doing this and both don't work. See below.

Method 1:

// This gets the ID that we're looking for from the NgRx Store.
const currentID = this.State$.currentId;

// This finds the element on the page with the data attribute, plus the ID from above.
const relevantElem: HTMLElement = document.querySelector(`[data-convo-id=${currentID}]`) as HTMLElement;

// Simulate click on that element.
relevantElem.click();

Method 2:

// Create the event
let event = document.createEvent("HTMLEvents");

// Tie the event to 'click'
event.initEvent("click", true, true);

// This gets the ID that we're looking for from the NgRx Store.
const currentID = this.State$.currentId;

// This finds the element on the page with the data attribute, plus the ID from above.
const relevantElem: HTMLElement = document.querySelector(`[data-convo-id=${currentID}]`) as HTMLElement;

// Simulate click event on that element.
relevantElem.dispatchEvent(event);

For reference, here is the HTML element itself:

<p #el [attr.data-convo-id]="conversation.id" (click)="viewConversation(el)"><strong>VIEW</strong></p>

In summary, both click events do nothing. Even if I add a 'SetTimeout' function along with a console log to ensure it is clicked after a decent amount of time, and the click is still ignored.

I get zero errors with the above code.

I have an element on a page in my Angular 8 Project.

This element has an attribute of 'data-convo-id' with a unique string attached to it.

On this element is a click function that will load data based off of the data attribute that is also on that element (as described above).

Because I won't strictly have access to this element, I need a way of finding the element on this page using 'document.querySelector()', and then triggering a click on it. This in turn will fire off the function attached to that element, which will load the data as requested.

I've tried two different methods of doing this and both don't work. See below.

Method 1:

// This gets the ID that we're looking for from the NgRx Store.
const currentID = this.State$.currentId;

// This finds the element on the page with the data attribute, plus the ID from above.
const relevantElem: HTMLElement = document.querySelector(`[data-convo-id=${currentID}]`) as HTMLElement;

// Simulate click on that element.
relevantElem.click();

Method 2:

// Create the event
let event = document.createEvent("HTMLEvents");

// Tie the event to 'click'
event.initEvent("click", true, true);

// This gets the ID that we're looking for from the NgRx Store.
const currentID = this.State$.currentId;

// This finds the element on the page with the data attribute, plus the ID from above.
const relevantElem: HTMLElement = document.querySelector(`[data-convo-id=${currentID}]`) as HTMLElement;

// Simulate click event on that element.
relevantElem.dispatchEvent(event);

For reference, here is the HTML element itself:

<p #el [attr.data-convo-id]="conversation.id" (click)="viewConversation(el)"><strong>VIEW</strong></p>

In summary, both click events do nothing. Even if I add a 'SetTimeout' function along with a console log to ensure it is clicked after a decent amount of time, and the click is still ignored.

I get zero errors with the above code.

• javascript
• angular
• typescript

Share Improve this question Follow edited Sep 30, 2021 at 10:28 Guerric P 31.9k66 gold badges5858 silver badges106106 bronze badges asked Jan 10, 2020 at 8:49 Jamie BohannaJamie Bohanna 56011 gold badge88 silver badges2828 bronze badges 2

• 2 You said you don't have access to the element but <p #el [attr.data-convo-id]="conversation.... line shows you do. You have set (click) event and template variabe on it, don't you? – Vega Commented Jan 13, 2020 at 9:31
• instead of document.queryselector,can you create an angular directive and handle the click event there ? this directive can be applied to the html element explicity – boredbear153 Commented Jan 19, 2020 at 13:11

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4 +25

You should avoid using native JavaScript API as much as possible when using Angular.

Try this instead:

//In your ponent class properties
@ViewChildren('el') elList: QueryList<ElementRef>;

//In the relevant part of your code
this.elList.find(x => x.nativeElement.getAttribute('data-convo-id') == currentID).click();

Are you successfully getting the element you want?

If so, you need to add the following:

document.querySelector(/**/).addEventListener('click', callbackfn)

and in your ponent add the function

callbackfn(event: Event): void { console.log(event); console.log(this); }

I add console.log(this) to show that you aren't operating from within the angular ponent any more, so you need to pass any services or variables you want in the function as part of the element like so:

const el = document.querySelector(/**/) as any;
el.router = this.router //add angular router, for example

and then in your callback you can do something like this:

callbackfn(event: Event): void {
  event.preventDefault(); //if you don't want the click to propagate
  const target = event.currentTarget as any;
  const router = target.router as Router;
  //do the thing you want to do with your service, in this case angular router
}

For querySelector([data-convo-id=${currentID}]), we can not simply get the dom element by its custom data attribute. We have to say the corresponding tag name as well. (i.e)

document.querySelector(p[data-convo-id="${currentID}"])

Please refer to my code sandbox (app.ponent.ts) example. I am not expert in angular. But I have tried with static currentID and it is working :-).