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
– Jed Richards, Commented Aug 8, 2018 at 15:19
@JoelJoseph answered a similar question with an example implementation here. $element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"}); — coltonfranco
– coltonfranco, Commented Aug 8, 2018 at 15:26

Chellappan வ · Accepted Answer · 2018-08-08 15:14:19Z

2

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

answered Aug 8, 2018 at 15:14

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cryptex Technologies · Accepted Answer · 2018-09-04 12:35:54Z

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);
  }

tom van green · Accepted Answer · 2018-08-08 15:11:36Z

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 8, 2018 at 15:11

tom van green

1,73410 silver badges16 bronze badges

2 Comments

Raja Over a year ago

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

tom van green Over a year ago

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.

Suresh Kumar Ariya · Accepted Answer · 2018-08-08 15:14:42Z

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 8, 2018 at 15:14

answered Aug 8, 2018 at 15:10

Suresh Kumar Ariya

9,8041 gold badge22 silver badges28 bronze badges

1 Comment

Raja Over a year ago

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.

user27301444 · Accepted Answer · 2024-09-12 11:25:03Z

-1

$(document).ready(function() {
            $('#myElement').mousemove(function(event) {
                var mouseX = event.pageX;
                var mouseY = event.pageY;
                $('#position').text('Mouse Position: (' + mouseX + ', ' + mouseY + ')');
            });
        });

answered Sep 12, 2024 at 11:25

user27301444

1

2 Comments

DarkBee Over a year ago

How does this solve the question asked? Code-only answers are not good answers

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Angular 6 trigger click event like jQuery

5 Answers 5

Comments

Comments

2 Comments

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

1 Comment

2 Comments

Linked

Related