Smart Filter

How to use

Installation

Go to your project, open the terminal and use the following command:

npm i @smartbit4all/filter

Then import it in the AppModule:

app.module.ts:

import { SmartFilterModule } from '@smartbit4all/filter';
...
@NgModule({
    declarations: [...]
    imports: [
        ...
        SmartFilterModule,
    ],
    providers: []
    ...
})

Prerequisites

Coming soon...

Usage

Coming soon...

Version logs

@smartbit4all/filter v1.1.8

Type: Update

From now on it is possible to catch onValueChanges.

filter!: SmartFilter;

@ViewChild("smartfilter") filterComp!: SmartFilterComponent;

constructor() {}
ngAfterViewInit(): void {
    this.filterComp.service.change.pipe.subscribe(() => {
        console.log(this.filterComp.service.filter);
    });
}

async submitForm(): Promise<void> {
    let res = await this.filterComp.submit();
    console.log(res);
}

@smartbit4all/filter v1.1.4

Type: Bugfix

Date between has been fixed.

@smartbit4all/filter v1.1.1

Type: Update

Make possible action selector optional.

To display the possible actions above the filter field set the showPossibleActions property TRUE in the SmartFilter model.

export interface SmartFilter {
    data: FilterExpressionField[];
    type: SmartFilterType;
    showPossibleActions?: boolean; <<<==== set true to display possible actions
    controlPanelPosition?: SmartFilterPosition;
    queriesPosition?: SmartFilterPosition;
    advancedQueryCustomComponent?: SmartFilterExpressionFieldComponent;
    operationTranslator?: (operation: FilterExpressionOperation) => string;
}

@smartbit4all/filter v1.1.0

Type: Update

Make filter view layout responsive. Seperate advanced-filter component to another package.

How to make filter view responsise:

• add width to the parent div
• use relative unit (e.g. vw) for width css property

@smartbit4all/filter v1.0.0

Type: Feature

The @smartbit4all/filter has been published.