Filter Select

Filter Select is the compact filtering pattern for Select. It uses the standard ngs-select dropdown behavior and replaces the closed value display with ngs-filter-trigger.

Use it in toolbars, table headers, dashboards, and admin list pages when the filter name should stay visible and the selected state should be summarized inline. Multiple Select controls show a selected-value count badge; single Select controls show the selected option text. This summary is read automatically from the parent Select. Use option data with ngsFilterTriggerValue when the summary needs richer rendering from the full selected object.

The NgStarter Angular Filter Select pattern uses ngs-filter-trigger inside ngs-select to show a compact filter label with an automatic selected-value badge.

Keyboard access

Tab or Shift+Tab focuses Filter Select without opening it, just like a regular Select. Enter or Space opens the list. Up and Down navigate options; Enter or Space selects an option. Escape closes the list and keeps focus on the trigger. Tab closes the list and continues to the next control. Returning focus after selection or Escape does not reopen the list.

Basic Filter Select

Use ngs-filter-trigger inside a multiple Select when a toolbar or table filter should stay compact.

Clearable Filter Select

Add clearable to let users remove all selected filter values directly from the trigger.

Single Filter Select

In single selection mode, the filter trigger shows the selected option text instead of a count badge.

Clearable Single Filter Select

Use clearable on a single filter select when the selected option should be removable without opening the panel.

Custom Value

Add data to each option and project ng-template[ngsFilterTriggerValue] inside the trigger when the selected value needs custom rendering.

Count Options

Use maxCount to cap large selected counts and showZero when an empty filter should still render its badge.