title: Show the table only when I looked for 3 characters
body: <p>I work with angular, angular-material and firebase.</p>
  
  <p>I can correctly display my data, filter, sort and paginate them with the code below.</p>
  
  <p>By cons I would display my data only when I have already entered 3 characters in my search bar.</p>
  
  <p>Can you help me or give me a track? Thank you !</p>
  
  <pre><code>export class AnnuairePSComponent implements OnInit {
  
  Data = {
  titre:'',
  prenom: '',
  nom:'',
  prof: '',
  sv: '',
  site:''
  }
  
  displayedColumns = [
  'titre',
  'prenom',
  'nom',
  'prof',
  'sv',
  'site'
   ];
  
   dataSource = new MatTableDataSource();
  
  applyFilter(filterValue: string) {
  filterValue = filterValue.trim(); 
  filterValue = filterValue.toLowerCase(); 
  this.dataSource.filter = filterValue;
  }
  
  ngAfterViewInit() {
  this.psService.getpss().subscribe(res =&gt; {this.dataSource.data = res;}); 
  }
  
  private paginator: MatPaginator;
  private sort: MatSort;
  
  @ViewChild(MatSort) set matSort(ms: MatSort) {
  this.sort = ms;
  this.setDataSourceAttributes();
  }
  
  @ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
  this.paginator = mp;
  this.setDataSourceAttributes();
  }
  
  setDataSourceAttributes() {
  this.dataSource.paginator = this.paginator;
  this.dataSource.sort = this.sort;
  }
  
  constructor(private psService: PsService, private router: Router) { }
  }
  </code></pre>
  
  <p>html </p>
  
  <pre><code>&lt;mat-toolbar color="primary" [ngStyle]="{'height': '120px','padding-top' :'30px'}"&gt; 
  
  &lt;mat-form-field appearance="outline" style="width:100%" &gt;
  &lt;input matInput (keyup)="applyFilter($event.target.value)"  &gt;
  &lt;mat-label&gt;Rechercher un professionel&lt;/mat-label&gt;
  &lt;/mat-form-field&gt;
  
  &lt;span class="example-spacer"&gt;&lt;/span&gt;
  &lt;/mat-toolbar&gt;
  
  &lt;mat-card [ngStyle]="{'margin': '5px'}" *ngIf="dataSource?.filteredData.length"&gt;
  
  &lt;mat-table  [dataSource]="dataSource" [ngStyle]="{ 'width':'100%'}" matSort&gt;
  .....
  &lt;/mat-table&gt;
  </code></pre>