WML Options

starlightViewModes.switchTofunction h(){const t=window.location.hash;document.querySelectorAll(".starlight-view-modes-switcher-a").forEach(e=>{e.href&&(e.href=e.href.split("#")[0]+t)})}h();window.addEventListener("hashchange",h);The wml-options library is an Angular-based toolkit designed to enhance the selection and management of options within applications. Its primary objective is to provide a streamlined and efficient way for developers to integrate and manage multiple choice selections, toggles, and option-related actions in their Angular projects. The library offers a set of components and services that enable the display and interaction with various types of options, supporting both default and custom components for dynamic and interactive content.

Key features of the wml-options library include:

Customizable option items with dynamic content.Support for reactive forms, allowing easy integration with Angular’s form system.Ability to handle a large number of options efficiently.Customizable appearance through CSS and SCSS.Modular and flexible design, facilitating independent or combined usage of components.

Installation

Terminal window


npm install --verbose @windmillcode/angular-wml-options

Usage

WMLOptionsZero

Getting Started

Displaying a List of Options

Custom Option Content

Handling Option Selection

Default Values

IMPORTANT WMLOptionZeroItemProps.isChosen is the only way to set default values on options!!!

Reference

`WMLOptionsZeroProps` Properties

Property	Type	Description
`hasBeenInitalized`	`boolean`	Indicates if the component has been initialized.
`chosen`	`WMLOptionsZeroProps["options"][]`	The list of chosen options.
`options`	`WMLOptionZeroItemProps[]`	The list of available options.
`limit`	`number`	Maximum number of selectable options.
`wmlField`	`WMLFieldZeroProps`	The associated WML field for reactive form integration.
`formArray`	`FormArray`	The form array for managing selected options.
`listenForClearedFormIsEnabled`	`boolean`	Enables listening for form clear events.
`updateFormArrayPredicate`	`(val: any) => any`	Predicate function to update the form array.
`restoreInitalValuesInFormArray`	`() => void`	Function to restore initial values in the form array.

`WMLOptionZeroItemProps` Properties

Property	Type	Description
`isChosen`	`boolean`	Indicates if the option is chosen.
`text`	`string`	The display text for the option.
`toggleClass`	`string`	CSS class to toggle for the option.
`clickPredicate`	`Function`	Predicate function to handle option click events.
`wmlOptions`	`WMLOptionsZeroProps`	The parent options configuration.
`customCpnt`	`WMLCustomComponent`	Custom component for the option content.

`WMLOptionsZeroComponent` Methods

Method	Parameters	Description
`listenForClearedForm`	None	Listens for form clear events and updates option states.
`populateFields`	`init: boolean`	Populates fields based on the selected options.
`updateFormArray`	None	Updates the form array with the selected options.
`toggleChosen`	`btn: WMLOptionZeroItemProps, init: boolean`	Toggles the chosen state of an option.
`ngAfterViewInit`	None	Lifecycle hook for after view initialization.
`ngOnDestroy`	None	Lifecycle hook for component destruction.

Changelog

v18.1.3000-beta1 [8/1/24]

updated package to conform with @windmillcode/angular-wml-components-base ,

v18.1.3000-beta2 [8/1/24]

updated package to conform with @windmillcode/angular-wml-components-base ,