TailNG - Signal first Angular UI components

API reference

The default surface is tng-month-daypicker. It wraps the shared datepicker surface with a MM-DD adapter and pins navigation so the year panel is never committed as a value.

Value type

type TngMonthDayValue = Readonly<{
  day: number;   // 1–31
  month: number; // 1–12
}>;

Month and day values are normalized on input: month is clamped to 1–12 and day to 1–31. Actual calendar validation (e.g. Feb 29 in a non-leap year) relies on the year input for the internal date adapter.

`tng-month-daypicker` (component)

<tng-month-daypicker
  [defaultValue]="{ month: 12, day: 25 }"
  [year]="2024"
  placeholder="MM-DD"
></tng-month-daypicker>

Selection and value

Property	Type	Default	Details
`value`	`TngMonthDayValue \| undefined`	undefined	Controlled month-day value. When set, the component reflects this value and emits valueChange on user interaction.
`defaultValue`	`TngMonthDayValue`	{ day: 1, month: 1 }	Uncontrolled initial month-day value used when no value input is provided.
`year`	`number \| string`	currentYear()	The reference year used for internal date arithmetic, calendar bounds, and leap-year day validation. Accepts a string that coerces to a number.

Interaction and behavior

Property	Type	Default	Details
`allowManualInput`	`boolean`	true	Allows typing directly into the field. The adapter parses MM-DD format on commit.
`defaultOpen`	`boolean`	false	Sets the uncontrolled initial open state of the calendar 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.

Accessibility and presentation

Property	Type	Default	Details
`disabled`	`boolean`	false	Disables the field and all calendar interaction.
`fullWidth`	`boolean`	true	Makes the host fill the available inline size.
`invalid`	`boolean \| string`	false	Forces invalid styling in addition to manual input validation state. Accepts a boolean attribute.
`placeholder`	`string`	'MM-DD'	Hint text shown in the input when no value is selected.
`required`	`boolean \| string`	false	Marks the field as required in form-field contexts. Accepts a boolean attribute.

Outputs

Output	Type	Details
`valueChange`	`TngMonthDayValue`	Emits the selected { month, day } object after a calendar click or successful manual input commit.
`openChange`	`boolean`	Emits whenever the popup opens or closes.

Form-field integration

tng-month-daypicker 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.