Angular Components

This is the Angular wrapper library generated from the LMVZ-DS Components package via Stencil.

Angular project stub

The Angular project was generated with Angular CLI version 18.2.8 and upgraded to 20.3.7.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory and published from there (during the root project's pnpm publish run).

lmvz-select Value Accessor

Angular's Forms API (ControlValueAccessor) does not integrate automatically with Web Component custom properties and events (unlike React and Vue, which align more closely with the web platform's event and property model). The LmvzSelectValueChangeHelper directive bridges this gap, providing the necessary two-way binding and form-control integration that the Stencil-generated wrapper alone cannot supply.

The LmvzSelectValueChangeHelper directive provides automatic ControlValueAccessor integration for lmvz-select, supporting both single-select and multiselect modes on the same component via formControlName, [(ngModel)], or manual FormControl binding.

Value Type

The resulting FormControl/FormGroup value type is string | string[] | null regardless of mode. This intentionally looser type reflects the component's runtime behavior:

• Single-select mode (multiple false or unset): value is string | null
• Multiselect mode (multiple true): values is string[]

The accessor branches in writeValue on the shape of the incoming value; your app must set compatible values. See lmvz-select value and values props for full prop documentation.

Property Binding for values (Multiselect)

The values prop is a JS property only — it is not attribute-reflected. Template attribute bindings do not work:

// ❌ Silently fails
<lmvz-select [multiple]="true" values="['ch', 'de']"></lmvz-select>

// ✓ Correct: property binding
<lmvz-select [multiple]="true" [values]="selectedValues"></lmvz-select>

// ✓ Correct: form control binding (recommended for form integration)
<lmvz-select [formControl]="myControl"></lmvz-select>

Runtime multiple Mode Switching

Toggling the multiple prop at runtime is an app-level responsibility. The component does not automatically reset the control's value when switching modes. If you toggle multiple dynamically:

1. The stale value left in the now-inactive field (value in single→multi, values in multi→single) is ignored.
2. You must explicitly reset the control's value to match the new shape:

// When switching from single to multiselect
this.selectControl.setValue([this.selectControl.value]);

// When switching from multiselect to single
this.selectControl.setValue(this.selectControl.value[0]);

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.