Skip to content
Xng UI
Docs CDK Components Tools Contribute About

Filter

@xngui/cdk/filter
@xngui/cdk/filter

Headless filter UI state — search and predicates.

Preview

Filter snapshot

null
  • Ada LovelaceEngineer
  • Grace HopperLead
  • Alan TuringResearch
  • Katherine JohnsonEngineer
import { createDataSource } from '@xngui/cdk/datasource';
import { XFilterState } from '@xngui/cdk/filter';
 
const filter = new XFilterState({
onChange: (next) => dataSource.setFilter(next),
});
 
<x-form-field label="Search">
<x-input [value]="searchValue" (changed)="filter.setSearch($event.value)" >
<x-form-field>
 
filter.setSearch('');
// Snapshot: null

Events

Interact with the preview — events will appear here.