Angular search after click event

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