When a button is clicked (click) event should execute after event

Question

When I click a button in my Angular page it should execute the a href tag first and then execute the buttons onClick function.

<button (click)="invokeFun()"><a href="mylink.com?state=take-back-to-my-link.com">Link</a> </button>

But when I use this code, It takes me to the link and brings me back but onClick function is not invoked.

when I checked Chrome Inspector, I got this error:

Uncaught ReferenceError : invokeFun is not defined at HTMLButtonElement.onclick

However, when I use onClick separately, it works.

Pretty random what I will say, but what if a tag was outside the button tag? Not sure if this is even a thing, just a random though. — Charis Moutafidis, Jul 04 '18 at 23:12
I have to execute both one after another on a single click. a tag link provides me with a token and onClick function uses that token — Navaneeth Selvaraj, Jul 04 '18 at 23:17
One fast way to solve this is to only have a button with an onclick function, in that function make an ajax request using jquery (instead of your a tag) and then with the data received call the invoceFun() function. — Charis Moutafidis, Jul 04 '18 at 23:25
Process flow doesn't make sense. If you leave current page completely current page starts all over when you come back. There is no event stored in persistence — charlietfl, Jul 05 '18 at 00:07
@charlietfl Yes, you are right! but the problem is the token expires soon and the form is lengthy and takes time to fill up. So I thought of saving a form state and reutilizing the form after getting the token. — Navaneeth Selvaraj, Jul 05 '18 at 04:36
Don't do this! It is invalid HTML : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button. Note : Permitted content Phrasing content but there must be no Interactive content. — Jon P, Jul 05 '18 at 05:35
Thank you everyone, for your input, it's greatly appreciated. — Navaneeth Selvaraj, Jul 06 '18 at 02:01

score 0 · Accepted Answer · answered Jul 05 '18 at 05:31

No, it isn't valid HTML5 according to the HTML5 Spec Document from W3C: and more

change your code like this
HTML:

<button (click)="invokeFun()">Link</button>

In Compoent :

invokeFun(){
    window.location.href = 'mylink.com?state=take-back-to-my-link.com';
}

1 Answers1