Overview Examples

Compound Input component

The component <day-compound-input> is the combination of two form controls (day-dropdown and day-input).

Dependencies

'/core'

Selectors

Compound input: day-compound-input

Installation and Usage

npm install @dayerlin-bustamante/compound-input

import { DAYCompoundInputComponent } from '@dayerlin-bustamante/compound-input';

<day-compound-input/>
... 
<day-compound-input>
<day-label size="medium">Phone</day-label>
<day-dropdown [ngModel]="dropdownValue()"
    [data]="dropdownOptions" 
    keyValue="id" 
    keyText="value"
    type="dropdown" 
    size="small"
    [hasSearch]="false"
    [showInputs]="false"
    [placeholder]="'...'">
    <ng-template DAYDropdownItemTmpl let-item="item">
        <day-icon [icon]="item.icon" class="dropdown-icon"/>
        <span> { { item.value } } </span>
    </ng-template>
    <ng-template DAYDropdownSelectionTmpl let-item="item">
        <day-icon [icon]="item.icon" class="dropdown-icon"/>
        <span> { { item.value } } </span>
    </ng-template>
</day-dropdown>
<day-input [placeholder]="'Phone'" [type]="'number'" [ngModel]="inputValue()"/>
</day-compound-input>

Description

The compound-input component combines a day-input field and a day-dropdown selector into a single, cohesive UI element.

Both the day-input and day-dropdown are implemented as ControlValueAccessor components, enabling seamless integration with Angular's reactive and template-driven forms.

Additionally, the component can optionally include a day-label component to provide identification for the control.

This compound structure is particularly useful for scenarios requiring combined input, such as entering a value with a selectable unit or prefix.

Inputs, Outputs, Directives and Public methods

Not included