Bibliolib-filter NPM

BibliolibFilter

This library is a filter component for the bibliolib project. It is used to filter and order the list of some items.

Installation

npm install bibliolib-filter

Usage

Import the material theme in your angular.json

"styles": [
    "@angular/material/prebuilt-themes/deeppurple-amber.css",
    "other styles..."
]

Import animations in your app.module.ts or app.config.ts

import { provideAnimations } from '@angular/platform-browser/animations';
// other imports...

export const appConfig: ApplicationConfig = {
  providers: [provideAnimations(), other providers...]
};

Import the module in your app.module.ts

import { BibliolibFilterModule } from 'bibliolib-filter';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BibliolibFilterModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Use the component in your app.component.html

<bibliolib-filter
    [mode]="mode"
    [orderConfig]="orderConfig"
    [filterConfig]="filterConfig"
    [activeFilterList]="activeFilterList"
    [lang]="'fr-FR'"
    (orderChange)="onOrderChange($event)"
    (filterChange)="onFilterChange($event)"
    (searchChange)="onSearchChange($event)">
</bibliolib-filter>

Inputs

Name	Type	Default	Description
mode	string	'filter-order'	The mode of the filter. Can be 'filter', 'order' or 'filter-order'.
orderConfig	FilterConfig.IOrderItemConfig[]	[]	The configuration of the order.
filterConfig	FilterConfig.IFullFilterItemConfig[]	[]	The configuration of the filter.
activeFilterList	FilterConfig.IFullFilterItemConfig[]	[]	The list of active filters.
lang	string	'fr-FR'	The language of the filter : 'fr-FR' or 'en-US'.

Outputs

Name	Type	Description
orderChange	EventEmitter<FilterConfig.IOrderItemForRequest>	The event emitted when the order is changed.
filterChange	EventEmitter<FilterConfig.IFullFilterItemConfig[]>	The event emitted when the filter is changed.
searchChange	EventEmitter	The event emitted when the search input is changed.