angular-slickgrid 9.0.0 → 9.0.1

package/docs/column-functionalities/filters/autocomplete-filter.md

@@ -1,183 +0,0 @@
-###### _requires Angular-Slickgrid >=5.0.0_
-
-#### Index
-- [Using `collection` or `collectionAsync`](#using-collection-or-collectionasync)
-- [Filter Options (`AutocompleterOption` interface)](#filter-options-autocompleteroption-interface)
-- [Using Remote API](#using-external-remote-api)
-- [Force User Input](#autocomplete---force-user-input)
-- [Update Filters Dynamically](../../column-functionalities/filters/input-filter.md#update-filters-dynamically)
-- [Animated Gif Demo](#animated-gif-demo)
-
-### Demo
-[Demo Page](https://ghiscoding.github.io/angular-slickgrid-bs4-demo/#/editor) | [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-editor.component.ts)
-
-### Introduction
-AutoComplete is a functionality that let the user start typing characters and the autocomplete will try to give suggestions according to the characters entered. The collection can be a JSON files (collection of strings or objects) or can also be an external resource like a JSONP query to an external API. For a demo of what that could look like, take a look at the [animated gif demo](#animated-gif-demo) below.
-
-We use an external lib named [Autocomplete](https://github.com/kraaden/autocomplete) (aka `autocompleter` on npm) by Kraaden.
-
-## Using `collection` or `collectionAsync`
-If you want to pass the entire list to the AutoComplete (like a JSON file or a Web API call), you can do so using the `collection` or the `collectionAsync` (the latter will load it asynchronously). You can also see that the Editor and Filter have almost the exact same configuration (apart from the `model` that is obviously different).
-
-```html
-<angular-slickgrid gridId="grid2"
-     [columns]="columnDefinitions"
-     [options]="gridOptions"
-     [dataset]="dataset">
-</angular-slickgrid>
-```
-
-##### Component
-```typescript
-import { Component, OnInit} from '@angular/core';
-
-export class GridBasicComponent implements OnInit {
-  columnDefinitions: Column[];
-  gridOptions: GridOption;
-  dataset: any[];
-
-  ngOnInit(): void {
-      // your columns definition
-    this.columnDefinitions = [
-      {
-        id: 'countryOfOrigin', name: 'Country of Origin', field: 'countryOfOrigin',
-        formatter: Formatters.complexObject,
-        dataKey: 'code', // our list of objects has the structure { code: 'CA', name: 'Canada' }, since we want to use the code`, we will set the dataKey to "code"
-        labelKey: 'name', // while the displayed value is "name"
-        type: 'object',
-        sorter: Sorters.objectString, // since we have set dataKey to "code" our output type will be a string, and so we can use this objectString, this sorter always requires the dataKey
-        filterable: true,
-        sortable: true,
-        minWidth: 100,
-        editor: {
-          model: Editors.autocompleter,
-          customStructure: { label: 'name', value: 'code' },
-          collectionAsync: this.http.get('assets/data/countries.json'), // this demo will load the JSON file asynchronously
-        },
-        filter: {
-          model: Filters.autocompleter,
-          customStructure: { label: 'name', value: 'code' },
-          collectionAsync: this.http.get('assets/data/countries.json'),
-        }
-      }
-    ];
-
-    this.gridOptions = {
-      // your grid options config
-    }
-  }
-}
-```
-
-### Filter Options (`AutocompleterOption` interface)
-All the available options that can be provided as filter `options` to your column definitions can be found under this [AutocompleterOption interface](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/interfaces/autocompleterOption.interface.ts) and you should cast your filter `options` to that interface to make sure that you use only valid options of the autocomplete library.
-
-```ts
-filter: {
-  model: Filters.autocompleter,
-  // previously known as `filterOptions` for < 9.0
-  options: {
-    minLength: 3,
-  } as AutocompleterOption
-}
-```
-
-## Using External Remote API
-You could also use external 3rd party Web API (can be JSONP query or regular JSON). This will make a much shorter result since it will only return a small subset of what will be displayed in the AutoComplete Editor or Filter. For example, we could use GeoBytes which provide a JSONP Query API for the cities of the world, you can imagine the entire list of cities would be way too big to download locally, so this is why we use such API.
-
-#### Note
-I don't have time to invest in finding how to use JSONP + CORS in Angular, if someone wants to submit a PR (Pull Request) with the proper Angular code, I would be happy to merge the code and update the Wiki. For now, I'll simply make a quick and easy example with the jQuery `$.ajax` call just for you to get the idea of how it works.
-
-```html
-<angular-slickgrid gridId="grid2"
-     [columns]="columnDefinitions"
-     [options]="gridOptions"
-     [dataset]="dataset">
-</angular-slickgrid>
-```
-
-##### Component
-```typescript
-import { Component, OnInit} from '@angular/core';
-
-export class GridBasicComponent implements OnInit {
-  columnDefinitions: Column[];
-  gridOptions: GridOption;
-  dataset: any[];
-
-  ngOnInit(): void {
-      // your columns definition
-    this.columnDefinitions = [
-      {
-        id: 'cityOfOrigin', name: 'City of Origin', field: 'cityOfOrigin',
-        filterable: true,
-        minWidth: 100,
-        editor: {
-          model: Editors.autocompleter,
-          placeholder: 'search city', //  you can provide an optional placeholder to help your users
-
-          // use your own autocomplete options, instead of $.ajax, use http
-          // here we use $.ajax just because I'm not sure how to configure http with JSONP and CORS
-          // previously known as `filterOptions` for < 9.0
-          options: {
-            minLength: 3, // minimum count of character that the user needs to type before it queries to the remote
-            fetch: (searchText, updateCallback) => {
-              // assuming your API call returns a label/value pair
-              yourAsyncApiCall(searchText) // typically you'll want to return no more than 10 results
-                 .then(result => updateCallback((results.length > 0) ? results : [{ label: 'No match found.', value: '' }]))
-                 .catch(error => console.log('Error:', error));
-            }
-          },
-        },
-        filter: {
-          model: Filters.autocompleter,
-          // placeholder: '&#128269; search city', // &#128269; is a search icon, this provide an option placeholder
-
-          // use your own autocomplete options, instead of $.ajax, use http
-          // here we use $.ajax just because I'm not sure how to configure http with JSONP and CORS
-          options: {
-            minLength: 3, // minimum count of character that the user needs to type before it queries to the remote
-            fetch: (searchText, updateCallback) => {
-              // assuming your API call returns a label/value pair
-              yourAsyncApiCall(searchText) // typically you'll want to return no more than 10 results
-                 .then(result => updateCallback((results.length > 0) ? results : [{ label: 'No match found.', value: '' }]))
-                 .catch(error => console.log('Error:', error));
-            },
-          }
-        }
-      }
-    ];
-
-    this.gridOptions = {
-      // your grid options config
-    }
-  }
-}
-```
-## Autocomplete - force user input
-##### Requires version `2.6.0+`
-If you want to add the autocomplete functionality but want the user to be able to input a new option, then follow the example below:
-
-```ts
-  this.columnDefinitions = [{
-        id: 'area',
-        name: 'Area',
-        field: 'area',
-        editor: {
-          model: Editors.autocompleter,
-          // previously known as `filterOptions` for < 9.0
-          options: {
-            minLength: 0,
-            forceUserInput: true,
-            fetch: (searchText, updateCallback) => {
-              updateCallback(this.areas); // add here the array
-            },
-          }
-        }
-      },
-  ];
-```
-You can also use the `minLength` to limit the autocomplete text to `0` characters or more, the default number is `3`.
-
-## Animated Gif Demo
-![](https://user-images.githubusercontent.com/643976/50624023-d5e16c80-0ee9-11e9-809c-f98967953ba4.gif)

package/docs/column-functionalities/filters/compound-filters.md

@@ -1,234 +0,0 @@
-#### index
-- [Available Types](#available-types)
-- [SASS Styling](#sass-styling)
-- [Compound Input Filter](#how-to-use-compoundinput-filter)
-- [Compound Date Filter](#how-to-use-compounddate-filter)
-- [Compound Operator List (custom list)](#compound-operator-list-custom-list)
-- [Compound Operator Alternate Texts](#compound-operator-alternate-texts)
-- [Filter Complex Object](input-filter.md#how-to-filter-complex-objects)
-- [Update Filters Dynamically](input-filter.md#update-filters-dynamically)
-- [How to avoid filtering when only Operator dropdown is changed?](#how-to-avoid-filtering-when-only-operator-dropdown-is-changed)
-- [Custom Filter Predicate](input-filter.md#custom-filter-predicate)
-- [Filter Shortcuts](input-filter.md#filter-shortcuts)
-
-### Description
-Compound filters are a combination of 2 elements (Operator Select + Input Filter) used as a filter on a column. This is very useful to make it obvious to the user that there are Operator available and even more useful with a date picker (`Vanilla-Calendar`).
-
-### Demo
-[Demo Page](https://ghiscoding.github.io/Angular-Slickgrid/#/clientside) / [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-clientside.component.ts)
-
-### Available Types
-There are multiple types of compound filters available
-1. `Filters.compoundInputText` adds an Operator combine to an Input of type `text` (alias to `Filters.compoundInput`).
-2. `Filters.compoundInputNumber` adds an Operator combine to an Input of type `number`.
-3. `Filters.compoundInputPassword` adds an Operator combine to an Input of type `password.
-4. `Filters.compoundDate` adds an Operator combine to a Date Picker.
-5. `Filters.compoundSlider` adds an Operator combine to a Slider Filter.
-
-### How to use CompoundInput Filter
-Simply set the flag `filterable` to True and use the filter type `Filters.compoundInput`. Here is an example with a full column definition:
-```ts
-// define you columns, in this demo Effort Driven will use a Select Filter
-this.columnDefinitions = [
-  { id: 'title', name: 'Title', field: 'title' },
-  { id: 'description', name: 'Description', field: 'description', filterable: true },
-  { id: 'complete', name: '% Complete', field: 'percentComplete',
-    formatter: Formatters.percentCompleteBar,
-    type: 'number',
-    filterable: true,
-    filter: { model: Filters.compoundInput }
-  }
-];
-
-// you also need to enable the filters in the Grid Options
-this.gridOptions = {
-   enableFiltering: true
-};
-```
-#### Notes
-The column definition `type` will affect the list of Operators shown, for example if you have `type: 'string'`, it will display the operators (`=`, `a*`, `*z`) where `a*` means StartsWith and `*z` means EndsWith. The current logic implemented is that any types that are not String, will display the list of Operators (` `, `=`, `<`, `<=`, `>`, `>=`, `<>`)
-
-
-### How to use CompoundDate Filter
-As any other columns, set the column definition flag `filterable: true` and use the filter type `Filters.compoundDate`. Here is an example with a full column definition:
-
-```ts
-// define you columns, in this demo Effort Driven will use a Select Filter
-this.columnDefinitions = [
-  { id: 'title', name: 'Title', field: 'title' },
-  { id: 'description', name: 'Description', field: 'description', filterable: true },
-  { id: 'usDateShort', name: 'US Date Short', field: 'usDateShort',
-    type: 'dateUsShort',
-    filterable: true,
-    filter: {
-      model: Filters.compoundDate,
-
-      // you can also add an optional placeholder
-      placeholder: 'filter by date'
-    }
-  }
-];
-
-// you also need to enable the filters in the Grid Options
-this.gridOptions = {
-   enableFiltering: true
-};
-```
-
-> **Note** we use [Tempo](https://tempo.formkit.com/) to parse and format Dates to the chosen format via the `type` option when provided in your column definition.
-
-#### Dealing with different input/ouput dates (example: UTC)
-What if your date input (from your dataset) has a different output on the screen (UI)?
-In that case, you will most probably have a Formatter and type representing the input type, we also provided an `outputType` that can be used to deal with that case.
-
-For example, if we have an input date in UTC format and we want to display a Date ISO format to the screen (UI) in the date picker.
-
-```ts
-// define you columns, in this demo Effort Driven will use a Select Filter
-this.columnDefinitions = [
-  { id: 'title', name: 'Title', field: 'title' },
-  { id: 'description', name: 'Description', field: 'description', filterable: true },
-  { id: 'utcDate', name: 'UTC Date', field: 'utcDate',
-    type: 'dateUtc',           // format used in the dataset (input)
-    formatter: Formatters.dateTimeIso, // format to show in the cell on each row (formatter)
-    outputType: 'dateTimeIso', // format to show in the date picker
-    filterable: true, filter: { model: Filters.compoundDate }
-  }
-];
-
-// you also need to enable the filters in the Grid Options
-this.gridOptions = {
-   enableFiltering: true
-};
-```
-
-#### Date and Time
-The date picker will automatically detect if the `type` or `outputType` has time inside, if it does then it will add a time picker at the bottom of the date picker.
-
-For example, if we have an input date in UTC format and we want to display a Date ISO format with time to the screen (UI) and the date picker.
-
-```ts
-// define you columns, in this demo Effort Driven will use a Select Filter
-this.columnDefinitions = [
-  { id: 'title', name: 'Title', field: 'title' },
-  { id: 'description', name: 'Description', field: 'description', filterable: true },
-  { id: 'utcDate', name: 'UTC Date', field: 'utcDate', // if your type has hours/minutes, then the date picker will include date+time
-    type: 'dateUtc',
-    formatter: Formatters.dateTimeIsoAmPm,
-    outputType: 'dateTimeIsoAmPm',
-    filterable: true, filter: { model: Filters.compoundDate }
-  }
-];
-
-// you also need to enable the filters in the Grid Options
-this.gridOptions = {
-   enableFiltering: true
-};
-```
-
-#### Filter Options (`VanillaCalendarOption` interface)
-All the available options that can be provided as filter `options` to your column definitions can be found under this [VanillaCalendarOption interface](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/interfaces/vanillaCalendarOption.interface.ts) and you should cast your filter `options` with the expected interface to make sure that you use only valid settings of the [Vanilla-Calendar](https://vanilla-calendar.pro/docs/reference/additionally/settings) library.
-
-```ts
-filter: {
-  model: Filters.compoundDate,
-  // previously known as `filterOptions` for < 9.0
-  options: {
-    displayDateMin: 'today'
-  } as VanillaCalendarOption
-}
-```
-
-#### Grid Option `defaultFilterOptions
-You could also define certain options as a global level (for the entire grid or even all grids) by taking advantage of the `defaultFilterOptions` Grid Option. Note that they are set via the filter type as a key name (`autocompleter`, `date`, ...) and then the content is the same as filter `options` (also note that each key is already typed with the correct filter option interface), for example
-
-```ts
-this.gridOptions = {
-  defaultFilterOptions: {
-    // Note: that `date`, `select` and `slider` are combining both compound & range filters together
-    date: { displayDateMin: 'today' },  // typed as VanillaCalendarOption
-    select: { minHeight: 350 },         // typed as MultipleSelectOption
-    slider: { sliderStartValue: 10 }
-  }
-}
-```
-
-### Compound Operator List (custom list)
-Each Compound Filter will try to define the best possible Operator List depending on what Field Type you may have (for example we can have StartsWith Operator on a string but not on a number). If you want to provide your own custom Operator List to a Compound Filter, you can do that via the `compoundOperatorList` property (also note that your Operator must be a valid OperatorType/OperatorString).
-
-```ts
-this.columnDefinitions = [
-  { id: 'title', name: 'Title', field: 'title' },
-  { id: 'description', name: 'Description', field: 'description', filterable: true },
-  { id: 'utcDate', name: 'UTC Date', field: 'utcDate',
-    type: 'dateUtc',
-    formatter: Formatters.dateTimeIsoAmPm,
-    outputType: 'dateTimeIsoAmPm',
-    filterable: true, filter: {
-      model: Filters.compoundSlider,
-      // here is our custom list that will override default list
-      compoundOperatorList: [
-        { operator: '', desc: '' },
-        { operator: '=', desc: 'Equal to' },
-        { operator: '<', desc: 'Less than' },
-        { operator: '>', desc: 'Greater than' },
-      ]
-    }
-  }
-];
-```
-
-### Compound Operator Alternate Texts
-You can change any of the compound operator text or description shown in the select dropdown list by using `compoundOperatorAltTexts` to provide alternate texts.
-
-The texts are separated into 2 groups (`numeric` or `text`) so that the alternate texts can be applied to all assigned filters, hence the type will vary depending on which Filter you choose as shown below:
-- `numeric`
-  - `Filters.compoundDate`
-  - `Filters.compoundInputNumber`
-  - `Filters.compoundSlider`
-- `text`
-  - `Filters.compoundInput`
-  - `Filters.compoundInputPassword`
-  - `Filters.compoundInputText`
-
-> **Note** avoid using text with more than 2 or 3 characters for the operator text (which is roughly the width of the compound operator select dropdown), exceeding this limit will require CSS style changes.
-
-```ts
-this.gridOptions = {
-  compoundOperatorAltTexts: {
-    // where '=' is any of the `OperatorString` type shown above
-    numeric: { '=': { operatorAlt: 'eq', descAlt: 'alternate numeric equal description' } },
-    text: { '=': { operatorAlt: 'eq', descAlt: 'alternate text equal description' } }
-  },
-}
-```
-
-![image](https://github.com/ghiscoding/slickgrid-universal/assets/643976/8f5cb431-d148-4c78-92fc-f1e3e48e64c4)
-
-### How to avoid filtering when only Operator dropdown is changed?
-Starting with version `>=2.1.x`, you can now enable `skipCompoundOperatorFilterWithNullInput` that can be provided to your Grid Options (or via global grid options) and/or your Column Definition.
-
-What will this option do really?
-- skip filtering (in other words do nothing) will occur when:
-  - Operator select dropdown (left side) is changed without any value provided in the filter input (right).
-- start filtering when:
-  - Operator select dropdown is changed **and** we have a value provided in the filter input, it will start filtering
-  - Operator select dropdown is empty **but** we have a value provided in the filter input, it will start filtering
-
-> **Note** the Compound Date Filter is the only filter that has this option enabled by default.
-
-###### Code
-```ts
-this.columnDefinitions = [{
-  id: 'name', field: 'name',
-  filter: {
-    model: Filters.compoundInput,
-    skipCompoundOperatorFilterWithNullInput: true // change via column def, always has higher specificity over grid options
-  }
-}];
-
-// or change for all compound filters of the same grid
-this.gridOptions = {
-  skipCompoundOperatorFilterWithNullInput: true,
-};
-```

package/docs/column-functionalities/filters/custom-filter.md

@@ -1,117 +0,0 @@
-#### index
-- [Filter Complex Object](input-filter.md#filter-complex-object)
-- [Update Filters Dynamically](input-filter.md#update-filters-dynamically)
-- [Custom Filter with Angular Components](#custom-filter-with-angular-components)
-
-### Demo
-##### with plain javascript/jQuery
-[Demo Page](https://ghiscoding.github.io/Angular-Slickgrid/#/clientside) / [Demo Client Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-clientside.component.ts) / [Custom InputFilter.ts](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/custom-inputFilter.ts)
-
-##### with Angular Component
-[Demo](https://ghiscoding.github.io/Angular-Slickgrid/#/angular-components) / [Demo Client Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-angular.component.ts)
-
-### Description
-You can also create your own Custom Filter with any html/css you want and/or jQuery library you wish to use. Latest version now supports Custom Filter with Angular Component, see [Example 22](https://ghiscoding.github.io/Angular-Slickgrid/#/angular-components)
-
-#### Limitations
-- as mentioned in the description, only html/css and/or jQuery libraries are supported.
-  - this mainly mean that Angular templates (components) are not supported (feel free to contribute).
-- SlickGrid uses `table-cell` as CSS for it to display a consistent height for each rows (this keeps the same row height/line-height to always be the same).
-  - all this to say that you might be in a situation were your filter shows in the back of the grid. The best approach to overcome this is to use a modal if you can or if the library support `append to body container`. For example, you can see that `multiple-select-vanilla` supports a `container`
-
-### How to use Custom Filter?
-1. You first need to create a `class` using the [Filter interface](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/interfaces/filter.interface.ts). Make sure to create all necessary public properties and functions.
- - You can see a demo with a [custom-inputFilter.ts](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/custom-inputFilter.ts) that is used in the [demo - example 4](https://ghiscoding.github.io/Angular-Slickgrid/#/clientside)
-2. Simply set the `columnDefinition.filter.model` to your new custom Filter class and instantiate it with `new` (you can also use dependency injection in the constructor if you wish). Here is an example with a custom input filter:
-```typescript
-// define you columns, in this demo Effort Driven will use a Select Filter
-this.columnDefinitions = [
-  { id: 'title', name: 'Title', field: 'title' },
-  { id: 'description', name: 'Description', field: 'description',
-    filterable: true,
-    filter: {
-       model: CustomInputFilter // create a new instance to make each Filter independent from each other
-    }
-  }
-];
-
-// you also need to enable the filters in the Grid Options
-this.gridOptions = {
-   enableFiltering: true
-};
-```
-
-### Default Search Term(s)
-If you want to load the grid with certain default filter(s), you can use the following optional properties:
-- `searchTerms` (array of values)
-
-For example, setting a default value into an `input` element, you can simply get the search term with `columnDef.filter.searchTerms` and set the default value in jquery with `$(filterElm).val(this.searchTerms);`
-
-### Collection
-If you want to pass a `collection` to your filter (for example, a multiple-select needs a select list of options), you can then use it in your custom filter through `columnDef.filter.collection`
-
-#### `key/label` pair
-By default a `collection` uses the `label/value` pair. You can loop through your `collection` and use the `label/value` properties. For example:
-```typescript
-// loop through collection to create select option
-this.columnDef.filter.collection.forEach((option: SelectOption) => {
-  // use the option value & label
-  options += `<option value="${option.value}">${option.label}</option>`;
-});
-```
-
-#### Custom Structure (key/label pair)
-What if your `collection` have totally different value/label pair? In this case, you can use the `customStructure` to change the property name(s) to use. You can change the label and/or the value, they can be passed independently.
-For example:
-```typescript
-// use custom structure value/label pair
-const labelName = (this.columnDef.filter.customStructure) ? this.columnDef.filter.customStructure.label : 'label';
-const valueName = (this.columnDef.filter.customStructure) ? this.columnDef.filter.customStructure.value : 'value';
-
-this.columnDef.filter.collection.forEach((option: SelectOption) => {
-  // use the option value & translated label
-  options += `<option value="${option[valueName]}">${option[labelName]}</option>`;
-});
-```
-
-### How to add Translation?
-
-#### LabelKey
-By default a `collection` uses the `label/value` pair without translation or `labelKey/value` pair with translation usage. So if you want to use translations, then you can loop through your `collection` and use the `labelKey/value` properties. For example:
-```typescript
-this.columnDef.filter.collection.forEach((option: SelectOption) => {
-  // translate label
-  const textLabel = (option.labelKey && typeof this.i18n.tr === 'function') ? this.i18n.tr(option.labelKey || ' ') : option.labelKey;
-
-  // use the option value & translated label
-  options += `<option value="${option.value}">${textLabel}</option>`;
-});
-```
-
-### Custom Structure with Translation
-What if you want to use `customStructure` and translate the labels? Simply pass the flag `enableTranslateLabel: true`
-
-For example:
-```typescript
-// use custom structure value/label pair
-const labelName = (this.columnDef.filter.customStructure) ? this.columnDef.filter.customStructure.label : 'label';
-const valueName = (this.columnDef.filter.customStructure) ? this.columnDef.filter.customStructure.value : 'value';
-
-this.columnDef.filter.collection.forEach((option: SelectOption) => {
-  // translate label
-  const textLabel = (option.labelKey && typeof this.i18n.tr === 'function') ? this.i18n.tr(option[labelName] || ' ') : option[labelName];
-
-  // use the option value & translated label
-  options += `<option value="${option[valueName]}">${textLabel}</option>`;
-});
-```
-
-## Custom Filter with Angular Components
-You can see them in [Example 22](https://ghiscoding.github.io/Angular-Slickgrid/#/angular-components) which have both Custom Editors & Filters which uses Angular Components. The 2nd column "Assignee" is the column that uses both (it uses `ng-select` 3rd party lib wrapped in an Angular Components [here](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/filter-ng-select.component.ts)) and you need to create a Custom Filter like [here](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/custom-angularComponentFilter.ts) and use that Custom Filter in your column definition like [here](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-angular.component.ts#L109).
-
-Personally I don't find this very straightforward and I don't recommend using Angular Components for Editors/Filters as it adds a lot of boilerplate (compare to 1 step with a jQuery Custom Filter) but if you really wish to go that route, it's now possible following the steps shown below.
-
-The steps to use an Angular Component as a Custom Filter are the following:
-1. Create a Custom Filter that will handle the creation or compilation of the Angular Component into a SlickGrid Editors. For that you can take a look at this [Custom Filter](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/custom-angularComponentFilter.ts)
-2. Define your Angular Component, for example take a look at this simple [ng-select Filter](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/filter-ng-select.component.ts)
-3. Use the Custom Filter inside your Column Definitions, for that you can see previous paragraph [here](#how-to-use-custom-filter)

package/docs/column-functionalities/filters/filter-intro.md

@@ -1,81 +0,0 @@
-#### Index
-- [How to use Filter?](#how-to-use-filter)
-- [Filtering with Localization](input-filter.md#how-to-hide-filter-header-row)
-- [Filtering with Localization](input-filter.md#filtering-with-localization-i18n)
-- [Filter Complex Object](input-filter.md#how-to-filter-complex-objects)
-- [Update Filters Dynamically](input-filter.md#update-filters-dynamically)
-- [Query Different Field (Filter/Sort)](input-filter.md#query-different-field)
-- [Dynamic Query Field](input-filter.md#dynamic-query-field)
-- [Debounce/Throttle Text Search (wait for user to stop typing before filtering)](input-filter.md#debouncethrottle-text-search-wait-for-user-to-stop-typing-before-filtering)
-- [Ignore Locale Accent in Text Filter/Sorting](input-filter.md#ignore-locale-accent-in-text-filtersorting)
-- [Custom Filter Predicate](input-filter.md#custom-filter-predicate)
-- [Filter Shortcuts](input-filter.md#filter-shortcuts)
-
-### Description
-
-Filtering is a big part of a data grid, Slickgrid-Universal provides a few built-in Filters that you can use in your grids. You need to tell the grid that you want to use Filtering (via Grid Options) and you also need to enable the filter for every column that you need filtering (via Column Definitions).
-
-### How to use Filter?
-You simply need to set the flag `filterable` for each column that you want filtering and then also enable the filters in the Grid Options. Here is an example with a full column definitions:
-```ts
-// define you columns, in this demo Effort Driven will use a Select Filter
-this.columnDefinitions = [
-  { id: 'title', name: 'Title', field: 'title' }, // without filter
-  { id: 'description', name: 'Description', field: 'description', filterable: true } // with filter
-];
-
-// you also need to enable the filters in the Grid Options
-this.gridOptions = {
-  enableFiltering: true
-};
-```
-
-### How to hide Filter Header Row?
-There are 2 ways to hide Filters from the user, you could disable it completely OR you could hide the Filter Header Row.
-
-##### You could disable the Filters completely,
-```ts
-angularGridReady(angularGrid: AngularGridInstance) {
-  this.angularGrid = angularGrid;
-}
-
-disableFilters() {
-  this.gridOptions = {
-     enableFiltering: false
-  };
-
-  // you could re-enable it later
-  this.angularGrid.setOptions({ enableFiltering: true });
-}
-```
-
-##### You could also enable Filters but Hide them from the user in the UI
-This can be useful for features that require Filtering but you wish to hide the filters for example Tree Data.
-
-```ts
-this.gridOptions = {
-  enableFiltering: true,
-  showHeaderRow: false,
-};
-```
-
-Also, if you don't want to see the Grid Menu toggle filter row command, you should also hide it from the menu via
-
-```ts
-angularGridReady(angularGrid: AngularGridInstance) {
-  this.angularGrid = angularGrid;
-}
-
-hideFilterRow() {
-  this.gridOptions = {
-    enableFiltering: true,
-    showHeaderRow: false,
-    gridMenu: {
-      hideToggleFilterCommand: true
-    },
-  };
-
-  // you can show toggle the filter header row dynamically
-  this.angularGrid.setHeaderRowVisibility(true);
-}
-```