How to call multiple methods on a button click using Angular 5?

Question

i am using angular 5 and facing a problem. i want to submit (click) event and call two or multiple method one bye one. Please give me idea or solution so that i can submit a (click) event and call two or multiple method.

such as

.html file

   <button (click)="abc(); bcde()"></button>

.ts file

  first method  
  abc(){}

  second method method
  bcde(){}

is this a right way to do this. Please suggest me and help me to solve this

You can call other methods from abd() like this abc(){ this.bcde();this.cdef();} — hrdkisback
– hrdkisback, Commented Jan 18, 2018 at 9:17
can you please tell me the correct way to call multiple method.. i am new in angular 5 — raihan
– raihan, Commented Jan 18, 2018 at 9:30
I had this problem on rest api calls, they would not call in order till i found this article: stackoverflow.com/a/45737338/1178375 — Omzig
– Omzig, Commented Aug 20, 2021 at 20:42

shahidfoy · Accepted Answer · 2019-01-11 22:09:20Z

40

you can also do

<button (click)="[abc(), bcde()]"></button>

answered Jan 11, 2019 at 22:09

shahidfoy

2,3512 gold badges19 silver badges23 bronze badges

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

Comments

Arun Kumaresh · Accepted Answer · 2018-01-18 09:23:52Z

12

<button (click)="callall()"></button>

make one function and call all the function in that

function 1

abc(){}

function 2

bcde(){}

call both in common function

 callall(){

        this.abc()
        this.bcde() 
}

edited Jan 18, 2018 at 9:23

answered Jan 18, 2018 at 9:19

Arun Kumaresh

6,2966 gold badges36 silver badges50 bronze badges

3 Comments

rrd Over a year ago

It's a use case that is best avoided raihan, as the others have already pointed out. Better to have a single method you call and from there call the other methods you want.

JFFIGK Over a year ago

why should this use case be avoided? It can happen that a click triggers two differ actions and it's not bad to make that explicit.

jasie Over a year ago

I agree that this is a bad practice! They should be called separately too avoid multiple code smells and pit falls.

V_for_Vj · Accepted Answer · 2020-05-05 04:14:39Z

9

This is the correct way I guess. It is working for me.

<button (click)="abc(); bcde()"></button>

answered May 5, 2020 at 4:14

V_for_Vj

8941 gold badge14 silver badges35 bronze badges

2 Comments

Pi Da Over a year ago

I tried this approach in AngularDart and it did not work. I had to make a new function that calls the other two.

V_for_Vj Over a year ago

oo waw that is a good input, good to know @Pi

Collectives™ on Stack Overflow

How to call multiple methods on a button click using Angular 5?

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related