Angular 4: stopPropagation() works, but also stops any further DOM update

Question

I have a <table> of users. Each <tr> can be clicked to open an information panel with the details of the user. Clicking it again closes the panel.

<tr (click)="data.info = invert(data.info);">

The <tr> also has icons to modify or delete the user. These are in separate <td>s.

<td (click)="delete(data?._id, rowIndex); $event.stopPropagation();">

The problem is when I click the modify or delete icons, the <tr>'s (click) event also fires. Yep, this can be easily solved by adding $event.stopPropagation() to the function I call. But interestingly it stops not only the parent element's click event from firing, but also any other action in the DOM.

The function invoked when clicking the delete icon is simply changing a variable which should cause a confirmation box (which is a div) to appear by ngIf. The variable indeed changes, but the div doesn't appear, only after I click the icon a second time. Interestingly though, it also works if for the second time I click anywhere on the screen.

The same happens even if the <tr> has no (click) action.

It doesn't help if I move stopPropagation() to the delete function I invoked, and it doesn't matter where I put it in the function.

The question is if I am using the proper way to stop propagation when clicking the <td>?

Answer 1

OK, I found it. This is something others may run into, and I haven't found any solution to this.

The root of the problem was that the component which I was trying to display by changing a variable in my delete() function was a @ViewChild. The problem did not occur with any other component or plain DOM element.

The solution was simply adding a ChangeDetectorRef to the parent component's constructor and put this to the end of the delete() function:

this._changeDetectorRef.detectChanges();
event.stopPropagation();

Answer 2

You can try to add simply this:

(contextmenu)=" false" 

or if you want to call a function:

(contextmenu)="click(); false"