Filter

Usage samples

    
  @ViewChild('filter', { static: true }) filter: FilterComponent;

  ngOnInit() {
    this.filter.searchValueChange.subscribe(searchString => {
      this.loadGrid(searchString);
    });
    this.loadGrid('');
  }

  loadGrid(criteria: string): void  {
    this.users$ = this.userService.getAll(criteria);
  }

Filter with default placehoder and debounce

    
   <lux-filter #filter placeholder="type to search">
   </lux-filter>
Username First Name Last Name
{{ user.userName }} {{ user.firstName }} {{ user.lastName }}

Filter with different Placehoder, Label and Search on type false

    
  <lux-filter #filter2 placeholder="type to search2" label="Search" 
  [searchOnType]="false">
  </lux-filter>
Username First Name Last Name
{{ user.userName }} {{ user.firstName }} {{ user.lastName }}

Filter with different debounce

    
  <lux-filter #filter3 placeholder="type to search3" debounce="500">
  </lux-filter>
Username First Name Last Name
{{ user.userName }} {{ user.firstName }} {{ user.lastName }}

Documentation

Properties

Events