CODEWITHSUNDEEP
angularangular-material
Alessandro Celeghin
Alessandro Celeghin

Reputation: 4209

How to add icon to mat-sort-header in mat-table

I am using mat-table and I need to add a custom icon in the mat-sort-header, but now if I click in the icon, table will be sorted and I don't want that behavior, this is the code:

<!-- line Column -->
      <ng-container matColumnDef="line">
        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>
          line
          <span *ngIf="lineFiltered == false; else noFilteredline" (click)="filterLine.toggle($event)" class="filter">
           <i class="fa fa-filter" aria-hidden="true"></i></span>
            <ng-template #noFilteredline>
            <span (click)="filterLine.toggle($event)" class="filter success"
              ><i class="fa fa-filter" aria-hidden="true"></i
            ></span>
          </ng-template>
        </th>
        <td mat-cell *matCellDef="let row">{{ row.line }}</td>
      </ng-container>

this is the sort header:

enter image description here

If I put the icon outside of it doesn't appear.

p.s. I can't use event.stopPropagation()

Upvotes: 3

Views: 4505

Answers (2)

Neel Rathod
Neel Rathod

Reputation: 2111

I know I'm late, But I hope It will save someone's day. I'm able to do that by using <mat-icon> tag.

In user.component.ts File

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { UserRoutingModule } from './user-routing';
import { UserComponent, ConferenceDetailsModal } from './user.component';

import { MatIconModule } from '@angular/material/icon';


@NgModule({
  declarations: [
    UserComponent
  ],
  imports: [
    CommonModule,
    UserRoutingModule,
    MatIconModule
  ]
})
export class UserModule { }

In user.component.html file

<table mat-table [dataSource]="dataSource">
    <!-- Title Column -->
    <ng-container matColumnDef="title">
        <th (click)="sortBy('title')" mat-header-cell *matHeaderCellDef mat-sort-header class="Fixed-left">
            <span class="title-text"> Title
                <span *ngIf="propertyName === 'title' && !ascending" class="fa fa-arrow-up">
                    <mat-icon>arrow_upward</mat-icon>
                </span>
                <span *ngIf="propertyName === 'title' && ascending" class="fa fa-arrow-down">
                    <mat-icon>arrow_downward</mat-icon>
                </span>
            </span>
        </th>
        <td mat-cell *matCellDef="let element" [innerHTML]="element.title" class="Fixed-left"> </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row
        *matRowDef="let row; columns: displayedColumns | paginate: {id: 'server', itemsPerPage: perPageItem, currentPage: currentPageNumber, totalItems: total}; let i=index;">
    </tr>
</table>

Upvotes: 0

Alessandro Celeghin
Alessandro Celeghin

Reputation: 4209

this code solve my problem:

<!-- line Column -->
    <ng-container matColumnDef="line">
      <th mat-header-cell *matHeaderCellDef>
          <div class="d-flex">
        <span *ngIf="lineFiltered == false" (click)="filterLine.toggle($event)" class="filter"
          ><i class="fa fa-filter" aria-hidden="true"></i
        ></span>
        <span mat-sort-header disableClear> {{ "contactlens.table.headers.line" | translate }}</span>
        </div>
      </th>
      <td mat-cell *matCellDef="let row">
        {{ row.line }}

      </td>
    </ng-container>

Upvotes: 1

Related Questions