API reference
The default surface is tng-yearpicker. It wraps the shared datepicker with a year-only adapter and opens the year grid directly, closing automatically after selection and emitting a plain number.
tng-yearpicker (component)
Wrapper attachment
<tng-yearpicker
[defaultValue]="2024"
[minYear]="2000"
[maxYear]="2030"
placeholder="YYYY"
></tng-yearpicker>
Selection and value
| Property | Type | Default | Details |
|---|---|---|---|
value | number | string | undefined | undefined | Controlled year value. When set, the component reflects this year and emits valueChange on user interaction. Strings are coerced to integers. |
defaultValue | number | string | currentYear() | Uncontrolled initial year used when no value input is provided. Defaults to the current calendar year. |
minYear | number | string | undefined | undefined | Minimum selectable year. Disables earlier years in the grid and constrains keyboard navigation. |
maxYear | number | string | undefined | undefined | Maximum selectable year. Disables later years in the grid and constrains keyboard navigation. |
fixedMonth | number | string | 0 | Month index (0-based) used for the internal anchor date. Useful when the downstream system expects a full Date but only cares about the year. |
fixedDay | number | string | 1 | Day used for the internal anchor date alongside fixedMonth. |
Interaction and behavior
| Property | Type | Default | Details |
|---|---|---|---|
allowManualInput | boolean | true | Allows typing a four-digit year directly into the field. Invalid input is discarded on blur. |
defaultOpen | boolean | false | Sets the uncontrolled initial open state of the year grid popup. |
readonly | boolean | false | Makes the text field read-only while still allowing calendar-based selection. |
restoreFocus | boolean | true | Returns focus to the trigger input after the popup closes. |
yearPageSize | number | string | 24 | Controls how many years are shown per page in the year grid. Minimum value is 4. |
Accessibility and presentation
| Property | Type | Default | Details |
|---|---|---|---|
disabled | boolean | false | Disables the field and all year grid interaction. |
fullWidth | boolean | true | Makes the host fill the available inline size. |
invalid | boolean | string | false | Forces invalid styling. Accepts a boolean attribute. |
placeholder | string | 'YYYY' | Hint text shown in the input when no year is selected. |
required | boolean | string | false | Marks the field as required in form-field contexts. Accepts a boolean attribute. |
Outputs
| Output | Type | Details |
|---|---|---|
valueChange | number | Emits the selected year as a plain number after a grid click or successful manual input commit. |
openChange | boolean | Emits whenever the popup opens or closes. |
Internal lifecycle notes
The year grid popup follows a two-step commit: when the user selects a year cell, the controller records it as a pending year and transitions to the month view. The component intercepts the viewChange event — when the view reaches month with a pending year, it emits valueChange and closes the popup immediately. This keeps the UX feeling instant without requiring a separate confirm button.
Form-field integration
tng-yearpicker registers itself with the TNG_FORM_FIELD_CONTROL token so it works seamlessly inside tng-form-field. The focusable element is the inner datepicker text input — clicking the form-field label routes focus there directly. The invalid and required inputs are forwarded to the shared control adapter so error and hint messaging renders correctly.