Prevent sort on click into input in Angular matTable

user_12979071 0
Viewed 745

Heyho,

I am new to Angular and I am facing a problem currently. I want to use MatTable with a sortable header. I did it like this:

    <table mat-table matSort #table id="entries" [dataSource]="dataSource">
       <ng-container matColumnDef="column1">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> 
             Column1
             <input matInput placeholder="Search Column1" #input style="max-width: 125px;">
          </th>
          <td mat-cell *matCellDef="let entry"> {{data.column1}} </td>
       </ng-container>
       <ng-container matColumnDef="column2">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Column2</th>
          <td mat-cell *matCellDef="let entry"> {{data.column2}} </td>
       </ng-container>
    </table>

My problem is that the sort function is triggered if I click in the input to start typing and that is kinda not good. So is there a possibility to prevent that the sort is triggered if I click into the input?

Thanks in advance

angular-material angular
1 Answers

You need to stop the click event propagation from the input element as follows,

<input matInput placeholder="Search Column1" #input (click)="$event.stopPropagation()" style="max-width: 125px;">

By doing this, the click event won't propagate to it's parent which is the header cell with sort action.

user_40352320
Related