Stop mouse event propagation

by

If you want to be able to add this to any elements without having to copy/paste the same code over and over again, you can make a directive to do this. It is as simple as below:

import {Directive, HostListener} from "@angular/core";
    
@Directive({
    selector: "[click-stop-propagation]"
})
export class ClickStopPropagation
{
    @HostListener("click", ["$event"])
    public onClick(event: any): void
    {
        event.stopPropagation();
    }
}

Then just add it to the element you want it on:

<div click-stop-propagation>Stop Propagation</div>

More Related Contents:

  1. Why am I seeing a dropdown like thingy and need to “open” my Angular component in chrome
  2. Angular HTTP GET with TypeScript error http.get(…).map is not a function in [null]
  3. How to detect a route change in Angular?
  4. How can I use “*ngIf else”?
  5. Error when trying to inject a service into an angular component “EXCEPTION: Can’t resolve all parameters for component”, why?
  6. Load external CSS into component
  7. Repeat HTML element multiple times using ngFor based on a number
  8. How to dynamically add a directive?
  9. Default and specific request timeout
  10. Router Navigate does not call ngOnInit when same page
  11. In Angular, What is ‘pathmatch: full’ and what effect does it have?
  12. Connect method DataSource is not emitting all paginated rows for MatTable
  13. Getting instance of service without constructor injection
  14. Angular2: Insert a dynamic component as child of a container in the DOM
  15. Angular2: How is ngfor expanded
  16. Angular 2: Iterate over reactive form controls
  17. How to trace routing in Angular 2?
  18. Can’t reload/refresh active route
  19. Angular – What is the meanings of module.id in component?
  20. Error trying to diff ‘[object Object]’ in Angular
  21. Reactive Forms: How to add new FormGroup or FormArray into an existing FormGroup at a later point in time in Angular till v14
  22. Pass parameter into route guard
  23. Typescript dependency injection public vs private
  24. Angular: selected on option of select doesn’t work as excepted while using along with ngModel
  25. NX MFE angular module federation not able to access remote micro front end
  26. How to throw error from RxJS map operator (angular)
  27. Angular2 ngModel inside ngFor (Data not binding on input)
  28. Need BrowserAnimationsModule in Angular but gives error in Universal
  29. Angular 2 disable sanitize
  30. Can I use Angular i18n to translate string literals in typescript code

Leave a Comment