How to add many functions in ONE ng-click?

Question

I've be looking for how to execute this but I can't find anything related so far, :( I could nest both functions yes but I'm just wondering if this is possible? I'd like to do this literally:

<td><button class="btn" ng-click="edit($index) open()">Open me!</button></td>

My JS code at the moment:

$scope.open = function () {
  $scope.shouldBeOpen = true;
};      

$scope.edit = function(index){

  var content_1, content_2;
      content_1 = $scope.people[index].name;
      content_2 = $scope.people[index].age;

  console.log(content_1);
};

I'd like to call two functions with just one click, how can I do this in angularJS? I thought it'd be straight forward like in CSS when you add multiple classes...but it's not :(

Maxence · Accepted Answer · 2015-04-08T18:39:14.070

721

You have 2 options :

Create a third method that wrap both methods. Advantage here is that you put less logic in your template.
Otherwise if you want to add 2 calls in ng-click you can add ';' after edit($index) like this

ng-click="edit($index); open()"

See here : http://jsfiddle.net/laguiz/ehTy6/

edited Apr 08 '15 at 18:39

answered May 29 '13 at 12:38

Maxence

13,148
4
29
28

1

I've used method two (which does what's needed), but what reasons are there *not* to have two calls in one `ng-click`? – Dave Everitt Oct 28 '13 at 11:23
Both work it's just a matter of trying to put the logic in your controllers only. In that case not a big deal :) – Maxence Oct 30 '13 at 11:10
I see absolutely nothing wrong with option 2 as it is a directive's (such as ng-click's) job to map user action to scope behavior. – ThinkingInBits Oct 31 '13 at 18:21
1

That's why I gave 2 options. Personally I prefer to wrap calls in my controller but it's up to you. – Maxence Nov 21 '13 at 10:14
Is there any harm in using Option 2 ? – Aniket Sinha Jun 25 '14 at 13:38
5

There's no problem with option 2 but option 1 is cleaner since you should avoid adding code and logic in your views. It's better if you need to modify something in the future. – Dani Barca Casafont Nov 04 '14 at 12:42
1

Option 2 has one minor issue: angular needs a bit longer to parse the expression I guess (as it discovers the ";" between the two functions and then has to parse the two parts separately). However I found one good reason when to use option 2: If you HAVE to call the first function on the current scope of that specific element in the DOM tree and the other function in a different context (i.e. controller) – Bouncing Bit Mar 11 '15 at 11:50
8

In my own case, Option 2 means avoiding adding a common function inside a directive, which is probably slower and definitely harder to maintain. – Alex Mar 26 '15 at 13:51
3

Option 1 also gives you one more unnecessary function to have to test – Parris Varney Aug 11 '16 at 20:52
How to do that in angular 2+ ? (action1 ; action2 not working) – Emeric Aug 05 '18 at 12:29
@Emeric I just tested it in Angular 15 and it works without problems. – Daniel Methner Mar 16 '23 at 07:42

score 28 · Answer 2 · answered Feb 16 '17 at 07:46

28

You can call multiple functions with ';'

ng-click="edit($index); open()"

answered Feb 16 '17 at 07:46

amit

406
4
6

score 17 · Answer 3 · answered Sep 16 '18 at 08:08

17

A lot of people use (click) option so I will share this too.

<button (click)="function1()" (click)="function2()">Button</button>

answered Sep 16 '18 at 08:08

Nebojsa Sapic

9,285
1
22
23

8

Using (click)="function(); function2()" works as well. I just found that out and wanted to share. – amlane86 Jan 15 '19 at 13:07
1

I found this useful when binding to `keyup.enter`. The `;` separation didn't work because the methods were not always executing in order. – xandermonkey Mar 04 '19 at 19:31

score 11 · Answer 4 · answered Aug 28 '20 at 06:41

11

The standard way to add Multiple functions

<button (click)="removeAt(element.bookId); openDeleteDialog()"> Click Here</button>

or

<button (click)="removeAt(element.bookId)" (click)="openDeleteDialog()"> Click Here</button>

answered Aug 28 '20 at 06:41

Sushil

670
7
14

score 3 · Answer 5 · edited Dec 06 '17 at 00:27

3

Try this:

Make a collection of functions
Make a function that loops through and executes all the functions in the collection.
Add the function to the html

array = [
    function() {},
    function() {},
    function() {}
]

function loop() {
    array.forEach(item) {
        item()
    }
}

ng - click = "loop()"

edited Dec 06 '17 at 00:27

roelofs

2,132
20
25

answered Dec 05 '17 at 23:57

tzvis

41
4

score 0 · Answer 6 · edited Dec 17 '19 at 13:16

0

Follow the below

ng-click="anyFunction()"

anyFunction() {
   // call another function here
   anotherFunction();
}

edited Dec 17 '19 at 13:16

Prashant Pimpale

10,349
9
44
84

answered Nov 26 '19 at 09:17

Bhaskararao Gummidi

2,513
1
12
15

score 0 · Answer 7 · answered Jun 15 '22 at 13:37

                <!-- Button trigger modal -->
                <button type="button" (click)="open(content)" style="position: fixed;  bottom: 0;  right: 130px;"
                    class="btn col-sm-1  btn-Danger" >
                    Reject
                </button>
                  
                  

                <ng-template #content let-modal>
                    <div class="modal-header">
                      <h4 class="modal-title" id="modal-basic-title">Profile update</h4>
                      <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
                    </div>
                    <div class="modal-body">
                     
                        <div class="mb-3">
                          <label class="bg-danger text-light" for="Reject">Reason For reject</label>
                          
                            <textarea   matInput placeholder="  Reject" [(ngModel)]="asset_note">{{note}}</textarea>
                
                        </div>
                    </div>
                    <div class="modal-footer">
                        <!-- -->
                      <button type="button" class="btn btn-outline-dark" (click)="reject();modal.close('Save click') ">Save</button>
                    </div>
                  </ng-template> 


**.ts file**
open(content: any) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return `with: ${reason}`;
    }
  }


close()
{

this.getDismissReason(ModalDismissReasons.ESC);
}

score 0 · Answer 8 · answered Nov 25 '22 at 13:12

0

Which of the following is best practice (option1 or option2)

<button (click)="removeAt(element.bookId); openDeleteDialog()"> Click Here
<button (click)="removeAt(element.bookId)" (click)="openDeleteDialog()"> Click Here

answered Nov 25 '22 at 13:12

Ramana Vummenthala

11
3

If you have a new question, please ask it by clicking the [Ask Question](https://stackoverflow.com/questions/ask) button. Include a link to this question if it helps provide context. - [From Review](/review/late-answers/33269814) – Vojin Purić Nov 30 '22 at 08:20

score -15 · Answer 9 · edited May 19 '16 at 14:53

-15

ng-click "$watch(edit($index), open())"

edited May 19 '16 at 14:53

Undo

25,519
37
106
129

answered Apr 14 '16 at 11:15

Austin

19
1
8

1

Syntax here is incorrect. As explained above, the semicolon is the delimiter; not a comma... Among other things... – Erik Grosskurth Mar 14 '17 at 18:35

How to add many functions in ONE ng-click?

9 Answers9

Linked

Related