Angular - Click event not triggered on button

Question

After I updated angular and angular-cli, I keep facing strange problems. I have two <div>s and I am trying to just hide one and show the other when a button clicked.

Here is my functions:

  ngOnInit() {
    this.goalView = this.el.nativeElement.getElementsByClassName('goal-view')[0];
    this.goalEdit = this.el.nativeElement.getElementsByClassName('goal-edit')[0];
  }

  triggerEdit(): void {
    this.goalView.style.display = 'none';
    this.goalEdit.style.display = 'block';
  }

  triggerView(save: boolean): void {
    this.goalEdit.style.display = 'none';
    this.goalView.style.display = 'block';
  }

And my template:

<div class="goal-view">
  ...
  <button class="ui right floated green button margin-vertical-10" (click)="triggerEdit()"><i class="ui edit icon"></i>Edit</button>
</div>
<div class="goal-edit">
  ...
  <button class="ui right floated green button margin-vertical-10"><i class="ui save icon" (click)="triggerView(true)"></i>Save</button>
</div>

When I click edit button, it works. When I click the save button, it works, sometimes. But sometimes it does not, I should click the button 30-40 times to make it work. I tried to just console.log("something") in the triggerView function, but it does the same. Sometimes works and sometimes does not.

I also checked the event.target of the click events:

document.addEventListener('click', function(evt) {
    console.log(evt.target);
}, false);

It seems normal. It prints the correct <button> when I clicked.

Any idea on what should be the problem?

You have the second click listener on the image tag instead of the button tag, is that intentional? — danielkelemen
– danielkelemen, Commented Apr 11, 2017 at 10:47
@IsuruAb I just noticed it and wasn't sure that it's the problem. Anyway I posted an answer now. — danielkelemen
– danielkelemen, Commented Apr 11, 2017 at 11:09

devnull69 · Accepted Answer · 2017-04-11 10:50:41Z

5

Generally, you should not have to deal with direct element access inside your Component.

Rather you should switch over to using properties representing the state of elements.

Try this

<div class="goal-view" [hidden]="hideGoalView">
...
</div>

<div class="goal-edit" [hidden]="hideGoalEdit">
...
</div>


ngOnInit() {
   this.hideGoalView = false;
   this.hideGoalEdit = true;
}

triggerEdit(): void {
   this.hideGoalView = true;
   this.hideGoalEdit = false;
}

triggerView(save: boolean): void {
   this.hideGoalView = false;
   this.hideGoalEdit = true;
}

answered Apr 11, 2017 at 10:50

devnull69

16.6k9 gold badges55 silver badges67 bronze badges

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

5 Comments

Bünyamin Sarıgül Over a year ago

That is useful but not the problem of my code. Thank you anyway.

devnull69 Over a year ago

Does it have the same effect? Did you try it?

Bünyamin Sarıgül Over a year ago

Yes, I know it will do the same. But I asked the problem of my code.

devnull69 Over a year ago

Nevertheless, after moving the event handler from the icon to the button, you should still follow my answer

Bünyamin Sarıgül Over a year ago

I agree that the way you did is more "angular way". I will use that, thanks.

danielkelemen · Accepted Answer · 2017-04-11 11:08:34Z

2

You have the second click listener on the image tag instead of the button tag.

answered Apr 11, 2017 at 11:08

danielkelemen

1,69911 silver badges14 bronze badges

Comments

Jaroslaw K. · Accepted Answer · 2017-04-11 11:09:57Z

0

You add events to two different elements.

Method triggerEdit is event on button tag, so you can click on whole button to called it.

Method triggerView is event on i element, so you must click small area on button to call it.

whether I suggest you take seriously @devnull69 advice. This will save you problems in the future.

answered Apr 11, 2017 at 11:09

Jaroslaw K.

5,4142 gold badges42 silver badges66 bronze badges

Collectives™ on Stack Overflow

Angular - Click event not triggered on button

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related