Angular 2 prevent click on parent when clicked on child

Question

I have a click event nested one level. When i click on the child the expected function is called but the parent\'s function is also called. Here is the code

<         


        

Answer 1

This is known as Event Bubbling. Events are first handled by the innermost element and then propagate to the outer elements until they reach the root.

  

    Name - {{item.user.name}}
  

In this case, when you click on username or tag, it will first call inner element i.e. getUserDetails() and the root element i.e. setUserData().

So, to prevent this event bubbling, just add

event.preventDefault();

in defination of getUserDetails($event) or

Name - {{item.user.name}}

That's all you need to you.