@talenra/inbox documentation
  1. Components
  2. RangeFilterComponent

File

src/lib/simple-filter-selection/range-filter/range-filter.component.ts

Description

Range filter component, which enables three possible filter types:

  1. date-range
  2. char-range
  3. number-range All three filter types are used to filter the data items by a range of values. The filter displays two input fields, one for the start value and one for the end value. An error message for the start and end input field is displayed if the input is syntactically false.
Example :
<talenra-range-filter (filterSelection)="onFilterSelection($event)" [attribute]="selectedAttribute"></talenra-range-filter>

Implements

OnInit OnChanges OnDestroy

Metadata

selector talenra-range-filter
imports ReactiveFormsModule FormFieldComponent InputComponent ButtonComponent TooltipDirective DateComponent TalenraInboxTranslatePipe
styleUrls ./range-filter.component.scss
templateUrl ./range-filter.component.html

Index

Properties
Methods
Inputs
Outputs

Inputs

attribute
Type : ISelectedFilterAttribute
Required :  true

The attribute to identify which filter is selected.

Outputs

filterSelection
Type : ISelectedFilterAttribute

The filterSelection output is used to emit the filter values.

Methods

checkEndInputFalse
checkEndInputFalse(start: string | number, end: string | number)

Auxiliary method to check if start string is before the end string of the given alphabet.

Parameters :
Name Type Optional Description
start string | number No

The start string.
end string | number No

The end string.
Returns : void
onEnterKey
onEnterKey(event: Event)

Function is necessary to prevent the enter key from being pressed.

Parameters :
Name Type Optional Description
event Event No

The event if the enter key is pressed.
Returns : void
resetFilterAttribute
resetFilterAttribute(mouseEvent: MouseEvent)

Resets the chosen filter values.

Parameters :
Name Type Optional Description
mouseEvent MouseEvent No

The mouse event.
Returns : void

Properties

charNumberRange
Type : unknown
Default value : new FormGroup( { start: new FormControl<string | number | undefined>(''), end: new FormControl<string | number | undefined>(''), }, { validators: [DataItemsClass.startBeforeEnd('start', 'end', true)] } )

The char and number range values.
Public Readonly charNumberStartValueInput
Type : unknown
Default value : viewChild<InputComponent>('charNumberStartValueInput')

The field for the char and number start value.
dateRange
Type : FormGroup
Default value : new FormGroup( { startDate: new FormControl(null, validateDate()), endDate: new FormControl(null, validateDate()), }, { validators: [validateStartDateIsBeforeEndDate('startDate', 'endDate', true)] } )

The date range values.
Public Readonly dateStartValueInput
Type : unknown
Default value : viewChild<DateComponent>('dateStartValueInput')

The field for the date start value.
falseEndInput
Type : unknown
Default value : false

The falseEndInput is used to check if the end input is syntactically false.

results matching ""

    No results matching ""