Back ArrowExplore all kits

Event Bubbling in Angular

share link

by Abdul Rawoof A R dot icon Updated: Jan 5, 2024

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.


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.

FAQ

1. What is event bubbling in Angular?

Event bubbling is a mechanism in Angular of an event triggered on a nested or child. The element propagates upwards through its parent elements in the DOM hierarchy. This allows parent components to be aware of and handle events that originated.


2. How does event bubbling work in Angular?

The event occurs on a DOM element, such as a button click Angular's event system captures and processes it. After processing the event on the target element, the event continues to propagate up the DOM. It triggers the same event on each ancestor element until it reaches the root of the document.


3. How can event bubbling be utilized in Angular applications?

Event bubbling can be leveraged in Angular applications to handle events. By allowing events to bubble up, you can create more modular and reusable components. Parent components can respond to events from their children without the need.


4. How does event bubbling differ from event capturing in Angular?

Event capturing is the opposite of event bubbling. The event is first captured at the root of the DOM hierarchy and then propagated down to the target element. Angular uses event bubbling, but both mechanisms can be used together to handle events.


5. Are there any potential pitfalls or considerations when using event bubbling in Angular?

  1. Performance: Excessive use of event bubbling can impact performance. The structure of your components and use event bubbling.
  2. Debugging: Understanding the flow of events through the DOM hierarchy can be challenging. Proper documentation and code comments can help mitigate this.
  3. Global Events: Be cautious with global events that bubble up to the document level. They may be caught by unintended components if not handled.


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.