2

I'm trying to add a icon to to the table header of an Angular Data Table. What am I missing?

Also, I want to make this clickable in order to show a modal. What should I add?

          <th mat-header-cell *matHeaderCellDef mat-sort-header> Action Name </th>
<mat-icon svgIcon="thumbs-up" aria-hidden="false" aria-label="Example thumbs up SVG icon"></mat-icon>
          <td mat-cell *matCellDef="let action"> {{action.actionName}} </td>
        </ng-container>````
Improve this question
3
  • What do you want to be clickable, the cell or the header? Commented Jul 16, 2019 at 14:30
  • @t8tortotlover the header to be clickable that would open a modal box. Commented Jul 16, 2019 at 19:12
  • So basically when I click the table header, I should be able to see a modal box that eventually i will build a filter function in. Commented Jul 17, 2019 at 3:54

1 Answer 1

Reset to default
2

Place the icon component within the header:

<th mat-header-cell *matHeaderCellDef mat-sort-header>
  <mat-icon svgIcon="thumbs-up" aria-hidden="false" aria-label="Example thumbs up SVG icon"></mat-icon>
  Action Name
</th>
<td mat-cell *matCellDef="let action"> {{action.actionName}} </td>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.