How to click on an element that is in the body pragmatically from inside of an angular component?

Issue

I have a website on which I have crisp chat service running and I'm trying to click on the chat box from one of my component's typescript files.

The crisp chat box is a div with the id of crisp-client inside body tag. How do I click on it from inside my typescript?

Solution

Inject Renderer2 in constructor -

constructor(private renderer: Renderer2) {}

Get the crisp-client element in your component -

let crispClient = this.renderer.selectRootElement('#crisp-client');

Perform click() event -

crispClient.click();

Working demo here

Added a test method on div to check -

<div id="crisp-client" onClick="console.log('crisp client clicked')"></div>

Answered By - Shyam Joshi