Angular search after click event

Question

I'm working with Angular recently and I need a help.

I have a table with Angular Material and in this table I have a lot of items and I have a "search box" like this:

<mat-form-field>
  <input matInput [(ngModel)]="SearchText" placeholder="Filtra i risultati" style="color: black;">                     
</mat-form-field>

<button mat-button (click)="applyFilter($event.target.value)" class="search-button">
  <mat-icon>search</mat-icon>
</button>

TS

applyFilter(filterValue: string) {
    filterValue = filterValue.trim();
    filterValue = filterValue.toLowerCase();
    this.dataSource.filter = filterValue;
}

Practically the result I want to achieve is that the list of items must appear only after writing something in the box and clicking on the button.

So the table is initially empty.

I write something and I click on the search-button and the requested results appear.

How can i get this result? Can you help me with HTML and TS?

Thanks

Check the console for errors

Prashant Pimpale
– Prashant Pimpale

2019-11-28 12:04:57 +00:00
Commented Nov 28, 2019 at 12:04 — Prashant Pimpale
– Prashant Pimpale, Commented Nov 28, 2019 at 12:04

Adrita Sharma · Accepted Answer · 2019-11-28 11:15:31Z

2

Change (click)="applyFilter($event.target.value)" with (click)="applyFilter(SearchText)"

$event.target.value means value of the same input element, here you need input value from button element. So use model value SearchText

Try like this:

<mat-form-field>
   <input matInput [(ngModel)]="SearchText" placeholder="Filtra i risultati" style="color: black;">                     
</mat-form-field>

<button mat-button (click)="applyFilter(SearchText)" class="search-button">
  <mat-icon>search</mat-icon>
</button

answered Nov 28, 2019 at 11:15

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

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

5 Comments

Pangelo Over a year ago

Do I need to change my TS? Because when I click on the button-search it still doesn't work.

Adrita Sharma Over a year ago

console.log(filterValue ) in your .ts. If it is the same as whatever you typed, you are good to go. No need to change anything, provided your backend is working fine. DO REMEMBER, YOU HAVE MAKE THE API CALL AGAIN. Only setting datasource filter value won't work

Pangelo Over a year ago

Yes, with console.log(filterValue) I have the same result that I search but nothing happens in the table. Does not filter. :(

Adrita Sharma Over a year ago

Check your backend.

Pangelo Over a year ago

I have this error in console: Unexpected token look for something in JSON at position 0. Where "look for something" is the word I searched for.

Collectives™ on Stack Overflow

Angular search after click event

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related