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.

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.

Using this component in production?

Source code, templates, and commercial support

NgStarter includes source code, admin dashboard templates, and commercial support.

View pricing →Explore admin templates