How to do event bubbling in Angular?

Question

When I click on red button, I should only see red in console and not gray. How can I achieve that?

    import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello',
  template: `
<button style="height: 100px; width: 200px;" (click)='gray()'> Gray
<button style="height: 20px; width: 40px; background-color:red" (click)='red()'>
Red
</button>
</button>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
  red() {
    console.log('red');
  }

  gray() {
    console.log('gray');
  }
}

Edit: I have tweaked the question to be a button inside a div

Possible duplicate of [Can I nest button inside another button?](https://stackoverflow.com/questions/39386497/can-i-nest-button-inside-another-button) — SGalea, Aug 12 '19 at 14:53
I can imagine a screen reader figuring out the button roles. Just because it works doesn't mean you should. — SGalea, Aug 12 '19 at 15:07

Bren Gunning · Accepted Answer · 2019-08-12T14:57:43.527

I've updated your code below. When you click the red button you want to pass the click event (seen as $event) and then using this event, in the method you are calling, add event.stopPropogation(); to stop the next mouse event from firing.

import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello',
  template: `
<button style="height: 100px; width: 200px;" (click)='gray()'> Gray
<button style="height: 20px; width: 40px; background-color:red" (click)='red($event)'>
Red
</button>
</button>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
  red($event: MouseEvent) {
    console.log('red');
    $event.stopPropagation();
  }

  gray() {
    console.log('gray');
  }
}

PS. Ultimately you shouldn't be nesting buttons though.

You didn't add the $event parameter in the red() method within the HTML. It should be `(click)='red($event)'` — Bren Gunning, Aug 12 '19 at 14:58

How to do event bubbling in Angular?

1 Answers1