Angular 6 trigger click event like jQuery

Question

I have been using Angular 6 and I am new to the Angular environment too.

My problem is that I have been thinking about this in a jQuery way.

I want to trigger an anchor link on page load like the below jQuery code in Angular 6.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#hello').click(function () {
                    console.log('yo yo yo .....you good to go.!!!');
                });
                $('a').trigger('click');
            });
        </script>

<a id="hello" href="http://www.google.com">Click me</a>

How to achieve this in Angular 6? I know that we can add a click on the elements. But in my project, I don't know have a control on anchor tag. I mean I cannot add click method, instead I want to trigger it externally like jQuery.

Hey Raja, I don't think Angular is the right tool for this job. It's not designed to hook onto existing markup like jQuery, it's designed to run off compiled Angular templates. If you don't have control over the anchor tag, and it isn't part of a Angular template you should just use jQuery for this. — Jed Richards, Aug 08 '18 at 15:19
@JoelJoseph answered a similar question with an example implementation [here](https://stackoverflow.com/questions/50836497/using-anchor-link-id-in-angular-6). `$element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});` — coltonfranco, Aug 08 '18 at 15:26

score 2 · Answer 1 · answered Aug 08 '18 at 15:14

You can use renderer2 service dispatchEvent method to dispatch Event

@ViewChild('elem') elem: ElementRef;
  constructor(private renderer2: Renderer2) {}

  ngOnInit() {
    this.renderer2.listen(this.elem.nativeElement, 'click', () => {
      alert(111);
    });
    let event: Event = new Event('click');
    this.elem.nativeElement.dispatchEvent(event);
  }

Example:https://stackblitz.com/edit/angular-renderer2-dispatch-event-2uhpay

score 1 · Answer 2 · answered Sep 04 '18 at 12:35

Change the Anchor link, so as to have a click function as shown below:

<a href="javascript:void(0)" (click)="onClickMe($event)">Click me</a>

Then in the Component.ts file, create the same function:

onClickMe(event){
  console.log('yo yo yo .....you good to go.!!!');
  window.open('https://google.com');
}

Finally on the ngOnInit() method of that Component.ts file, call that function as shown below:

  ngOnInit() {
    this.onClickMe(event);
  }

Suresh Kumar Ariya · Answer 3 · 2018-08-08T15:14:42.380

0

You can add click event to anchor link

<a (click)="onClickMe($event)">Click me!</a>

In Component:

onClickMe(event){
   event.preventDefault();
   window.open('https://google.com'); // you can load external URL
}

edited Aug 08 '18 at 15:14

answered Aug 08 '18 at 15:10

Suresh Kumar Ariya

9,516
1
18
27

Thanks for your answer. I just want to click the anchor tag externally, not by adding click event in the anchor. i just gave an example. I am sorry for the confusion. I just updated my question. – Raja Aug 08 '18 at 15:12

score 0 · Answer 4 · answered Aug 08 '18 at 15:11

0

You are on the right track by using (click)="onClickMe()". Now what is left to do is to add the method onClickMe the component that has the a tag in the template.

export class ExampleComponent {
  onClickMe() {
    console.log('');
  }
}

answered Aug 08 '18 at 15:11

tom van green

1,674
10
14

Thanks for your answer. I cannot change the anything in the anchor tag. so I just want to click the anchor tag externally, not by adding click method in the anchor. i just gave an example. I am sorry for the confusion. I just updated my question – Raja Aug 08 '18 at 15:14
Angular works differently than jquery and you can have problems/bugs when you mix both. So either you need to get control over the anchor tag or find a different solution to your problem. Have you tried using `document.querySelector` to find the anchor element? `document.querySelector` works similar like the jquery `$` function in regards of finding elements by css selectors. – tom van green Aug 08 '18 at 15:26

Angular 6 trigger click event like jQuery

4 Answers4