Add button in Angular Material Table filter

Question

I have a Table Filter in Angular Material :-

I want an icon at the right side of this filter, like below :-

I have tried with many configurations, without luck.

<mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    <span class="input-group-append">
      <button class="btn" (click)="doSomething()">
          <i class="fa fa-plus fa-fw"></i>
      </button>
    </span>
</mat-form-field>

Is there any simple way to achieve this?

What part of this are you struggling with exactly? is this what you are trying to do - stackblitz.com/edit/angular-kgbf9o ? — Michael Doye
– Michael Doye, Commented May 18, 2018 at 13:25
@Und3rTow, Thanks. I need exactly the same. Can we do it without writing css? — vinS
– vinS, Commented May 18, 2018 at 13:41
yes, you can handle the layout using angular-flex-layout, then you won't need to use CSS — Michael Doye
– Michael Doye, Commented May 18, 2018 at 13:43

VtoCorleone · Accepted Answer · 2018-05-18 17:43:19Z

2

Material 2 supports that in their documentation

<mat-form-field class="example-form-field">
  <input matInput type="text" placeholder="Clearable input" [(ngModel)]="value"/>
  <button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
    <mat-icon>close</mat-icon>
  </button>
</mat-form-field>

https://material.angular.io/components/input/examples

https://stackblitz.com/angular/eyrxeklkoyq?file=app%2Finput-clearable-example.ts

answered May 18, 2018 at 17:43

VtoCorleone

17.2k5 gold badges40 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

vinS Over a year ago

This is adding a button inside the field itself. But, there is not any space between "Filter Line" and "Icon", as I have indicated in the image (what I want). @Und3rTow solution is working as per my requirement. >> Still it might be a good solution, if I do not want space. As it doesn't require flex.

Collectives™ on Stack Overflow

Add button in Angular Material Table filter

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related