Stop other functions from exucuting on click Angular 5

Question

I have a Angular material table, each table row expands when it's click

within the last cell I load a component dynamically with ComponentFactory the loaded component is a dropdown.

The issue I'm having is when the dropdown is clicked the table row will expand and contract.

This is how I add function to the rows

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;let index=index" (click)="expandRow(index, row)" #myRow></mat-row>

This is the cell, where user side menu is loaded in:

  <ng-container *ngIf="column === 'viewSelection'">
    <ng-container matColumnDef="viewSelection">
      <mat-header-cell *matHeaderCellDef></mat-header-cell>
      <mat-cell *matCellDef="let row">
        <ng-container #sideMenu></ng-container>
        <!-- <user-side-menu></user-side-menu> -->
      </mat-cell>
    </ng-container>
  </ng-container>

How the user menu is loaded, which works fine:

  let sideMenu = this.sideMenu.toArray()
      for (let i = 0; i < sideMenu.length; i++) {
        const factory = this.resolver.resolveComponentFactory(this.ellipsis);
        let container = this.sideMenu.toArray()[i]

        const ellipsisComponent = container.createComponent(factory);
        ellipsisComponent.instance.data = this.returnedData[i]
        console.log(container, ellipsisComponent.data);

Html for loaded user menu:

<a aria-expanded="false" aria-haspopup="true" class="btn btn-icon has-dropdown" data-toggle="dropdown" id="grid-menu">
  <i class="ion-more"></i>
</a>
<div class="c-dropdown__menu dropdown-menu" aria-labelledby="grid-menu">
  <a class="c-dropdown__item dropdown-item" (click)="viewUser({Id:data?.Id}, $event);  $event.preventDefault()" >View/Edit User</a>
  <a *ngIf="data?.IsActive" class="c-dropdown__item dropdown-item" (click)="activeDeactivateUser(data?.Id, false);  $event.preventDefault()" data-toggle="modal" data-target="#deactivate-member">Deactivate User</a>
  <a *ngIf="!data?.IsActive" class="c-dropdown__item dropdown-item" (click)="activeDeactivateUser(data?.Id, true);  $event.preventDefault()" data-toggle="modal" data-target="#activate-member">Activate User</a>
</div>

As you can see I'm using prevent default, this does nothing, have tried stop propagation but this stops the functions I want to execute from executing

Hopefully someone can point me in the right direction

Try stopping the propagation at the div level (for click or mousedown). — ConnorsFan
Thanks for your answer, if you meant the div with aria-labelledby="grid-menu", that didn't work — Rasta

G. Tranter G. Tranter · Accepted Answer · 2018-04-27T19:04:04

You need to use stopPropagation() to stop the event from passing to parent DOM. You use preventDefault() to stop the default event action from being taken for the event object. For example, in the case of an anchor element, the default click action is to open the link, so if you wanted to implement a special check that prevents the link from being opened under a specific condition, you could use preventDefault() from within the (click) callback function to do that. But if you want to stop the click event from being passed to the parent element, you would use stopPropagation():

<span onclick="alert('You've already visited Stack Overflow')">
    <a href="https://stackoverflow.com" (click)="visitStack($event)">
        Stack Overflow
    </a>
</span>

stackVisited = false;
visitStack(event) {
    if (this.stackVisited) {
        event.preventDefault();
    } else {
        this.stackVisited = true;
        event.stopPropagation();
    }
}

Stop other functions from exucuting on click Angular 5

1 Answers