Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Autocomplete
Country Select
Currency Select
Date Format Select
Filter Select
Select
Timezone
Custom Inputs
Components
Navigation
Components
76
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
HomePricingTemplatesLicense
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Purchase

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.

Filter Trigger API

ngs-filter-trigger is projected inside ngs-select. Its text content is the visible filter name. For multiple Select controls it renders an automatic selected-count badge; for single Select controls it renders the selected option text.

Add [data] to ngs-option when the trigger value template needs the full selected object instead of only the option value or text.

If no custom value template is provided, the trigger falls back to the selected option text from the parent ngs-select.

PropTypeDefault
maxCount
Maximum selected count before the multiple-selection badge renders a plus suffix, for example 3+.
number99
showZero
Whether to render the multiple-selection badge when the parent Select has no selected values.
booleanfalse

Custom Value Template

Place ng-template[ngsFilterTriggerValue] inside ngs-filter-trigger to render the selected value from option data. The template receives the selected ngs-option[data] payload as its implicit value.

ContextType
$implicit / data
Selected ngs-option[data] payload. For multiple Select controls this is an array; for single Select controls this is one value.
unknown | unknown[]
text
Fallback selected option display text from the parent Select, available as let-text="text" when the template needs plain text alongside data.
string
count
Number of selected options.
number
multiple
Whether the parent Select is in multiple selection mode.
boolean

Using this component in production?

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

View pricing →Explore admin templates

Related components

Date Format SelectMore docs in Select.SelectMore docs in Select.Currency SelectMore docs in Select.