Back ArrowExplore all kits

Event Bubbling in Angular

share link

by Abdul Rawoof A R dot icon Updated: Mar 16, 2023

technology logo
technology logo

Guide Kit Guide Kit  

A concept in the DOM (Document Object Model) is called Event bubbling, and it happens when an element receives an event, and that Event bubbles up (or you can say it is transmitted or propagated) to its parent and ancestor elements in the DOM tree until it gets to the root element. 



Tip: Use the Event.isPropagationStopped() method to check whether this method was called for the Event. The Event.stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed. With bubbling, the Event is first captured and handled by the innermost element and then propagated to the outer elements. With capturing, the Event is first captured by the outermost element and propagated to the inner elements. The event propagation mode determines in which order the elements receive the Event. 



Here is an example of how to do Event bubbling in Angular: 

Fig: Preview of the output that you will get on running this code from your IDE.

Code

How to do event bubbling in Angular?

Lines of Code : 23dotLicense : Strong Copyleft (CC BY-SA 4.0)

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');
  }
}

Instructions

Follow the steps carefully to get the output easily.

  1. Install Visual Studio Code on your computer.
  2. Open terminal, install Angular using this command-'npm install -g @angular/cli@latest'.
  3. Create new folder using the command-'ng new folder_name'.
  4. Then open the folder from File->Open Folder.
  5. Create a new .ts file(eg:hello.component.ts).
  6. Copy the snippet using the 'copy' button and paste it into that file.
  7. Import hello.component.ts file in app.module.ts file.
  8. Get the HTML code alone from the demo given below.
  9. Save the files and open the terminal, use this command-'ng serve' to generate the output in localhost.


Reference: 'DEMO'


I hope you found this helpful.


I found this code snippet by searching for 'event bubbling in angular' in kandi. You can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

  1. The solution is created and tested in Visual Studio Code 1.74.1.
  2. The solution is test in Angular CLI - 15.2.2.


Using this solution, we are able to implement event bubbling in Angular with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to implement event bubbling in Angular.

Support

  1. For any support on kandi solution kits, please use the chat
  2. For further learning resources, visit the Open Weaver Community learning page.


Open Weaver – Develop Applications Faster with Open Source

kandi

Community and Support

Company

Follow

  • © 2023 Open Weaver Inc.