mat-nav-list with secondary buttons

Question

How do we properly add a secondary buttons inside a mat-nav-list?

Here is my example:

<mat-nav-list>
  <h3 matSubheader>This is the listview</h3>
    <a mat-list-item [routerLink]="['/detail']">
        <span matLine>Title</span>
        <button mat-icon-button (click)="onAdd()">
        <mat-icon>add</mat-icon>
    </button>
        <button mat-icon-button (click)="onRemove()">
        <mat-icon>delete</mat-icon>
    </button>
    </a>
</mat-nav-list>

In this code I expected the onAdd() or onRemove() to execute ALONE, but the page navigates afterward.

Working DEMO

Answer 1

In your function, you can add a parameter ($event) and call Event.preventDefault which should prevent the default action from happening (in this case, linking to some other link), as well as Event.stopImmediatePropagation.

Here's some code as an example:

<mat-nav-list>
    <h3 matSubheader>This is the listview</h3>
    <a mat-list-item [routerLink]="['/detail']">
        <span matLine>Title</span>
        <button mat-icon-button (click)="onAdd($event)">
            <mat-icon>add</mat-icon>
        </button>
        <button mat-icon-button (click)="onRemove($event)">
            <mat-icon>delete</mat-icon>
        </button>
    </a>
</mat-nav-list>

onAdd(event: Event) {
    event.preventDefault();
    // EDIT: Looks like you also have to include Event#stopImmediatePropogation as well
    event.stopImmediatePropagation();
    // ...
}
onRemove(event: Event) {
    event.preventDefault();
    // EDIT: Looks like you also have to include Event#stopImmediatePropagation as well
    event.stopImmediatePropagation();
    // ...
}

Answer 2

Just to add another solution to the mix... (as another option for other devs). And this solution prevents the need to 'preventDefault' and 'stopImmediatePropagation'.

<mat-list>
    <mat-list-item>
        <a matLine [routerLink]="['/detail']">
            <p matLine>Title</p>
        </a>
        <button mat-icon-button (click)="onAdd()">
            <mat-icon>add</mat-icon>
        </button>
        <button mat-icon-button (click)="onRemove()">
            <mat-icon>delete</mat-icon>
        </button>
    </mat-list-item>
</mat-list>

Additionally (we can add multiple rows of text and icon as follows):

<mat-list>
    <mat-list-item>
        <a matLine [routerLink]="['/detail']">
            <mat-icon mat-list-icon>accessibility</mat-icon>
            <p>
              <span>Text Row 1</span>
              <span>Text Row 2</span> 
            </p>
        </a>
        <button mat-icon-button (click)="onAdd()">
            <mat-icon>add</mat-icon>
        </button>
        <button mat-icon-button (click)="onRemove()">
          <mat-icon>delete</mat-icon>
        </button>
    </mat-list-item>
</mat-list>

And then the following css styles are to be applied:

.mat-list .mat-list-item a {
  cursor: pointer;
  display: flex;
  align-items: center;
  color: black;
  text-decoration: none;
}

.mat-list .mat-list-item .mat-list-icon {
  float: left;
  margin-right: 0.5em;
}

.mat-list .mat-list-item p span 
{
  display: block;
}

The above css ensures that the icon is floated to the left with a right margin applied - and that the items are aligned centrally.

The span splits the paragraph rows.

You can also then apply styles to each individual span if required.