Angular button click should execute multiple functions

Question

I suspect this is a very simple question that I'm just struggling with as I'm pretty new to this. I appreciate any help, or just pointing in the right direction.

I have a button that upon clicking it, I want it to execute multiple functions that I have written in the same ts file. The onClick() is working as if I put console.log statements in it, those will run. However calls to other functions do not.

Relevant code below should clarify my question:

HTML:

<button type="submit"
        class="btn btn-success"
        (click)="onSaveChanges()">
  Save Changes
</button>

TS:

  private populateToDeleteArray = () => {
    this.groupsToDelete = this.originalUserAssociatedGroups
      .filter(i1 => !this.pickListUserAssociatedGroups
        .some(i2 => i1.id === i2.id));
  }
  private populateToPostArray = () => {
    this.groupsToPost = this.pickListUserAssociatedGroups
      .filter(i1 => !this.originalUserAssociatedGroups
        .some(i2 => i1.id === i2.id));
  }

The other two functions are defined in a similar manner... Then the onClick():

  onSaveChanges = () => {
    console.log('Huh?');
    this.populateToDeleteArray();
    this.populateToPostArray();
    this.sendDeleteRequests();
    this.sendPostRequests();
  }

And as said above, the console.log runs, but the other functions are not called. I'm rather confused.

Thank you in advance!

Place console.lot statements in the other methods to confirm if they are invoked or not. — Nicholas K
– Nicholas K, Commented Jul 17, 2020 at 16:37
can you change your button type submit to button and try again ? — Cagri Tacyildiz
– Cagri Tacyildiz, Commented Jul 17, 2020 at 16:38
Certain. That's what is confusing me the most. It's as if the program isn't even recognizing the other lines. There is just no response at all for anything except the console.log's. — Sad-EyedLadyoftheLowlands
– Sad-EyedLadyoftheLowlands, Commented Jul 17, 2020 at 16:39
Nicholas K. Ok, I've done that... it appears that I was confused about the wrong thing. When I place console.log statements in each of the functions and click the button, those console.log's appear. That means the functions are being called, and there is just an issue with the functions themselves. That's an entirely different problem. Thanks very much. — Sad-EyedLadyoftheLowlands
– Sad-EyedLadyoftheLowlands, Commented Jul 17, 2020 at 16:43

Aarji George · Accepted Answer · 2020-07-17 17:06:45Z

1

Could you please try this:-

in HTML

<button type="submit"
        class="btn btn-success"
        (click)="onSaveChanges()">
  Save Changes
</button>

in TS

  populateToDeleteArray(){
    this.groupsToDelete = this.originalUserAssociatedGroups
      .filter(i1 => !this.pickListUserAssociatedGroups
        .some(i2 => i1.id === i2.id));
       console.log('working 1st');
  }
  populateToPostArray(){
    this.groupsToPost = this.pickListUserAssociatedGroups
      .filter(i1 => !this.originalUserAssociatedGroups
        .some(i2 => i1.id === i2.id));
        console.log('working 2nd');
  }

  onSaveChange() {
    console.log('Huh?');
    this.populateToDeleteArray();
    this.populateToPostArray();
  }

answered Jul 17, 2020 at 17:06

Aarji George

6295 silver badges9 bronze badges

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

1 Comment

Sad-EyedLadyoftheLowlands Over a year ago

Thanks so much for the response. This is the same suggestion as Nicholas K had made above. It showed me that I was wrong, and in fact, the functions are being called. The problem is with those individual functions. I'm not sure of the etiquette here. Given that my question was confused and it is thus not very likely to help others, what should I do next? Just leave the question as is? Should I "vote to delete" to prevent others from answering?

Collectives™ on Stack Overflow

Angular button click should execute multiple functions

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related