Components / Filter / API / FilterFieldComponent / 
New to Kendo UI for Angular? Start a free 30-day trial

FilterFieldComponent

Represents the Kendo UI Filter Field component for Angular. The Filter Field component can be used to add Filter Expressions declaratively.

  @Component({
      selector: 'my-app',
      template: `
         <kendo-filter (valueChange)="onValueChange($event)">
             <kendo-filter-field field="country" editor="string" [operators]="['neq', 'eq', 'contains']"></kendo-filter-field>
             <kendo-filter-field field="budget" editor="number"></kendo-filter-field>
             <kendo-filter-field field="discontinued" title="Discontinued" editor="boolean"></kendo-filter-field>
             <kendo-filter-field field="ordered on" title="Ordered on" editor="date"></kendo-filter-field>
         <kendo-filter>
      `
  })
  export class AppComponent {
     onValueChange(e: CompositeFilterDescriptor){
         console.log(e)
     }
 }

Selector

kendo-filter-field

Inputs

NameTypeDefaultDescription

editor

FilterEditor

Specifies the user-defined filter editor type that will be used. The available options are 'string', 'number', 'boolean', and 'date'.

editorFormat?

string | DateFormat | NumberFormat

Specifies the user-defined filter editor format that will be used. (see example)

field

string

Specifies the field that will be used by the user-defined filter.

operators

FilterOperator[]

Specifies the operators that will be available in the order of providing them. If no operators are provided, default operators are used for each filter type.

The default string operators are:

  • eq— Is equal to
  • neq— Is not equal to
  • isnull— Is null
  • isnotnull— Is not null
  • contains— Contains
  • doesnotcontain— Does not contain
  • startswith— Starts with
  • endswith— Ends with
  • isempty— Is empty
  • isnotempty— Is not empty

The default number and date operators are:

  • eq— Is equals to
  • neq— Is not equal to
  • isnull— Is null
  • isnotnull— Is not null
  • gt— Greater than
  • gte— Greater than or equal to
  • lt— Less than
  • lte— Less than or equal to

The boolean operator is always set to eq

title

string

Specifies the title text that will be displayed by the user-defined filter. If the title isn't set, the value passed to field is used.

In this article

Not finding the help you need?

Contact Support