WML Infinite Dropdown

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 Angular WML Infinite Dropdown library library provides a flexible and dynamic dropdown component for Angular applications, aiming to enhance user interfaces with nested and infinitely cascading options. It addresses the need for a versatile dropdown menu in Angular projects, offering a solution that supports multiple levels of navigation and interaction. This library is particularly useful for developers looking to implement complex menu structures without the hassle of managing intricate state logic or nested structures manually.

Central to this library is the WmlInfiniteDropdownComponent , which serves as the main container for the dropdown items. This component can be dynamically populated with a variety of options and sub-options, allowing for deep nesting and a hierarchical menu structure. Alongside it, the WmlInfiniteDropdownItemComponent represents individual items within the dropdown, which can be further customized using the WmlSampleInfiniteDropdownItemComponent . These components work in tandem to render the dropdown menu, manage its state, and handle user interactions. Developers can customize the appearance and behavior of the dropdown through parameters like WmlInfiniteDropdownProps and WmlInfiniteDropdownOption , which offer control over the items’ content, styling, and interaction handlers. This level of interactivity and customization enables the creation of complex menu systems that are both functional and visually appealing. The library’s design encourages a modular approach, where the main dropdown component acts as a container that can be filled with various configurable options, promoting reusability and maintainability in Angular applications.

Installation

Section titled “Installation”Terminal window npm install -s --verbose @windmillcode/angular-wml-infinite-dropdown

Usage

Section titled “Usage”To integrate the wml-infinite-dropdown component into your Angular project, you can follow these examples to cater to various development needs. The examples demonstrate how to use the component in your template (HTML) and how to configure it in your TypeScript file.

WMLInfiniteDropdownZero

Section titled “WMLInfiniteDropdownZero”

Basic Example

Section titled “Basic Example”

Customizing Dropdown Options

Section titled “Customizing Dropdown Options”

Adding Options

Section titled “Adding Options”open the preview in a browser and view the hierachy for the true infinite dropdown

Clicking On A Menu Item

Section titled “Clicking On A Menu Item”

Reference

Section titled “Reference”

WMLInfiniteDropdownZeroProps

Section titled “WMLInfiniteDropdownZeroProps”PropertyTypeDescriptionoptionsArray<WMLInfiniteDropdownZeroOption | WMLInfiniteDropdownZeroProps>List of options or sub-dropdowns.customizeObjectObject to customize dropdown and option properties.optionsSubjSubject<WMLInfiniteDropdownZeroInputOptions>Subject to handle options updates.styleanyStyle object for custom styling.openClassstringClass name to be applied when the dropdown is open.closedClassstringClass name to be applied when the dropdown is closed.updateOptionsFunctionFunction to update the dropdown options.getDropdownStatesFunctionFunction to get the open and closed states of the dropdown.toggleDropdownViaDropdownFunctionFunction to toggle the dropdown on hover interaction.toggleDropdownFunctionFunction to programmatically toggle the dropdown.

WMLInfiniteDropdownZeroOption

Section titled “WMLInfiniteDropdownZeroOption”PropertyTypeDescriptiontextstringDisplay text for the dropdown option.dropdownWMLInfiniteDropdownZeroPropsNested dropdown parameters, if any.openDropdownFunctionFunction to programmatically open the dropdown.closeDropdownFunctionFunction to programmatically close the dropdown.customWMLCustomComponentCustom component to be used as the dropdown item.detectChangeSubjSubject<void>Subject to handle change detection.clickPredicateFunctionPredicate function to be called on click.

Changelog

Section titled “Changelog”

v0.0.1

Section titled “v0.0.1”infinite dropdown supported

v0.0.2

Section titled “v0.0.2”custom dropdown entries supported

v0.1.0

Section titled “v0.1.0”able to customerize option containers able to specficy an interactionType of hover or click

v0.1.1

Section titled “v0.1.1”safari ios support replaced option tag with p tag to get component options to render

v0.1.2

Section titled “v0.1.2”proivded WmlInfiniteDropdownOption.detectChangeSubj the end developer can call to detectChanges when the developer makes an update that should reflect visually on the UI

v0.1.3

Section titled “v0.1.3”removed unneeded WmlInfiniteDropdownComponent.listenForOptions changes

v0.1.4

Section titled “v0.1.4”removed a console.log stmt

v0.1.5

Section titled “v0.1.5”added cursor pointer to the WmlInfiniteDropdownItemComponent

v0.2.0

Section titled “v0.2.0”added closeDropdown and openDropdown

v0.2.1

Section titled “v0.2.1”addded WMLInfiniteDropdownOptionBase to help with typing issues using as base for options and dropdown classes. added id for optionsProps for e2e testing

v1.0.1

Section titled “v1.0.1”MAJOR rename to angular-wml-infinite-dropdownfixed major problems concerning ngx-translate// translate// first make sure to have ONLY ONE in the imports for AppModule TranslateModule.forRoot({ defaultLanguage: 'en', loader: { provide: TranslateLoader, useFactory: HttpLoaderFactory, deps:[HttpClient] } }),// thenWmlInfiniteDropdownZeroNGXTranslateModule// for regularWmlInfiniteDropdownZeroModule

v1.0.2

Section titled “v1.0.2”added isPresnt support to hide the p tag for wml-sample-dropdown-option

v1.0.3

Section titled “v1.0.3”remove max width for dropdown items

v1.1.0

Section titled “v1.1.0”added cdref access to WmlInfiniteDropdownOption and WmlInfiniteDropdownProps which extends WMLView

v1.1.1

Section titled “v1.1.1”added components cdref to WmlInfiniteDropdownProps %!(EXTRA string=

v16.2.80

Section titled “v16.2.80”updated package to reflect the version 16.2.80 of @angular/core package),

v16.2.80

Section titled “v16.2.80”updated package to reflect the version 16.2.80 of @angular/core package,

v16.2.90

Section titled “v16.2.90”updated package to reflect the version 16.2.90 of @angular/core package,

v16.2.91

Section titled “v16.2.91”updated package to reflect the version 16.2.91 of @angular/core package,

v16.2.93

Section titled “v16.2.93”updated package to reflect the version v16.2.93 of @angular/core package, ,

v16.2.100

Section titled “v16.2.100”updated package to reflect the version v16.2.100 of @angular/core package, ,

v16.2.110

Section titled “v16.2.110”updated package to reflect the version v16.2.110 of @angular/core package, ,

v16.2.120

Section titled “v16.2.120”updated package to reflect the version v16.2.120 of @angular/core package, ,

v17.0.10

Section titled “v17.0.10”updated package to reflect the version v17.0.10 of @angular/core package, ,

v17.0.11

Section titled “v17.0.11”updated package to reflect the version v17.0.11 of @angular/core package,

v17.0.12

Section titled “v17.0.12”updated css and scss variables for the component to be indepent of windmillcode applications ,

v17.0.20

Section titled “v17.0.20”updated package to reflect the version ^17.0.2 of @angular/core package,

v17.0.40

Section titled “v17.0.40”updated package to reflect the version ^17.0.4 of @angular/core package,

v17.0.50

Section titled “v17.0.50”updated package to reflect the version ^17.0.5 of @angular/core package,

v17.0.60

Section titled “v17.0.60”updated package to reflect the version ^17.0.6 of @angular/core package,

v17.0.70

Section titled “v17.0.70”updated package to reflect the version ^17.0.7 of @angular/core package,

v17.0.7100

Section titled “v17.0.7100”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.7200

Section titled “v17.0.7200”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.7300

Section titled “v17.0.7300”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.80

Section titled “v17.0.80”updated package to reflect the version ^17.0.8 of @angular/core package,

v17.0.8100

Section titled “v17.0.8100”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.8102

Section titled “v17.0.8102”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.8103

Section titled “v17.0.8103”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.9000

Section titled “v17.0.9000”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.9001

Section titled “v17.0.9001”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.1.0000

Section titled “v17.1.0000”updated package to reflect the version ^17.1.0 of @angular/core package,

v17.1.2

Section titled “v17.1.2”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.1.1000

Section titled “v17.1.1000”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.1.2000 [2/5/24]

Section titled “v17.1.2000 [2/5/24]”updated package to reflect the version ^17.1.2 of @angular/core package,

v17.1.2001 [2/8/24]

Section titled “v17.1.2001 [2/8/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.1.3000 [2/8/24]

Section titled “v17.1.3000 [2/8/24]”updated package to reflect the version ^17.1.3 of @angular/core package

v17.1.3001 [2/8/24]

Section titled “v17.1.3001 [2/8/24]”added isPresent to WmlInfiniteDropdownProps constructor ,

v17.2.1000 [2/17/24]

Section titled “v17.2.1000 [2/17/24]”updated package to reflect the version ^17.2.1 of @angular/core package,

v17.2.2000 [2/23/24]

Section titled “v17.2.2000 [2/23/24]”updated package to reflect the version ^17.2.2 of @angular/core package,

v17.2.2001 [2/23/24]

Section titled “v17.2.2001 [2/23/24]”updated package to reflect the version ^17.2.2 of @angular/core package,

v17.2.3000 [2/28/24]

Section titled “v17.2.3000 [2/28/24]”updated package to reflect the version ^17.2.3 of @angular/core package,

v17.2.3001 [3/2/24]

Section titled “v17.2.3001 [3/2/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.2.3002 [3/5/24]

Section titled “v17.2.3002 [3/5/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.2.4000 [3/8/24]

Section titled “v17.2.4000 [3/8/24]”updated package to reflect the version ^17.2.4 of @angular/core package,

v17.2.4001 [3/12/24]

Section titled “v17.2.4001 [3/12/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.2.4002 [3/12/24]

Section titled “v17.2.4002 [3/12/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.2.4003 [3/13/24]

Section titled “v17.2.4003 [3/13/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.2.4004 [3/13/24]

Section titled “v17.2.4004 [3/13/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.3.0 [3/17/24]

Section titled “v17.3.0 [3/17/24]”updated package to reflect the version ^17.3.0 of @angular/core package ,

v17.3.1000 [3/22/24]

Section titled “v17.3.1000 [3/22/24]”updated package to reflect the version ^17.3.1 of @angular/core package,

v17.3.2000 [3/28/24]

Section titled “v17.3.2000 [3/28/24]”updated package to reflect the version ^17.3.2 of @angular/core package,

v17.3.3000 [4/4/24]

Section titled “v17.3.3000 [4/4/24]”updated package to reflect the version ^17.3.3 of @angular/core package,

v17.3.4000 [4/11/24]

Section titled “v17.3.4000 [4/11/24]”updated package to reflect the version ^17.3.4 of @angular/core package,

v17.3.4001 [4/16/24]

Section titled “v17.3.4001 [4/16/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.3.5000 [4/20/24]

Section titled “v17.3.5000 [4/20/24]”updated package to reflect the version ^17.3.5 of @angular/core package,

v17.3.5110 [5/1/24]

Section titled “v17.3.5110 [5/1/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.3.6000 [5/1/24]

Section titled “v17.3.6000 [5/1/24]”updated package to reflect the version ^17.3.6 of @angular/core package,

v17.3.7000 [5/9/24]

Section titled “v17.3.7000 [5/9/24]”updated package to reflect the version ^17.3.7 of @angular/core package,

v17.3.8000 [5/9/24]

Section titled “v17.3.8000 [5/9/24]”updated package to reflect the version ^17.3.8 of @angular/core package,

v17.3.9000 [5/16/24]

Section titled “v17.3.9000 [5/16/24]”updated package to reflect the version ^17.3.9 of @angular/core package,

v18.0.1 [5/22/24]

Section titled “v18.0.1 [5/22/24]”updated package to reflect the version ^18.0.0 of @angular/core package,

v18.0.4 [5/25/24]

Section titled “v18.0.4 [5/25/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v18.0.1000 [5/29/24]

Section titled “v18.0.1000 [5/29/24]”updated package to reflect the version ^18.0.1 of @angular/core package,

v18.0.2000 [6/6/24]

Section titled “v18.0.2000 [6/6/24]”updated package to reflect the version ^18.0.2 of @angular/core package,

v18.0.3000 [6/13/24]

Section titled “v18.0.3000 [6/13/24]”updated package to reflect the version ^18.0.3 of @angular/core package,

v18.0.3010 [6/18/24]

Section titled “v18.0.3010 [6/18/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v18.0.4000 [6/23/24]

Section titled “v18.0.4000 [6/23/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v18.0.5000 [6/26/24]

Section titled “v18.0.5000 [6/26/24]”updated package to reflect the version ^18.0.5 of @angular/core package,

v18.0.6000 [7/5/24]

Section titled “v18.0.6000 [7/5/24]”updated package to reflect the version ^18.0.6 of @angular/core package,

v18.1.4 [7/13/24]

Section titled “v18.1.4 [7/13/24]”updated package to reflect the version ^18.1.0 of @angular/core package,

v18.1.6 [7/14/24]

Section titled “v18.1.6 [7/14/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v18.1.1000 [7/18/24]

Section titled “v18.1.1000 [7/18/24]”updated package to reflect the version ^18.1.1 of @angular/core package,

v18.1.2000 [7/24/24]

Section titled “v18.1.2000 [7/24/24]”updated package to reflect the version ^18.1.2 of @angular/core package

v18.1.2300 [7/26/2024 3:45:00 PM EST]

Section titled “v18.1.2300 [7/26/2024 3:45:00 PM EST]”[UPDATE] Updated models.ts file, replaced WMLView with WMLRoute for WMLInfiniteDropdownOptionBase

[UPDATE] Added conditional links to wml-sample-infinite-dropdown-item.component.html for routerLink and href properties

[CHECKPOINT] Updated *ngIf conditions to handle props.routerLink and props.link in wml-sample-infinite-dropdown-item.component.html ,

v18.1.2300 [7/27/24]

Section titled “v18.1.2300 [7/27/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v18.1.2301 [7/30/24]

Section titled “v18.1.2301 [7/30/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

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

Section titled “v18.1.3000-beta1 [8/1/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

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

Section titled “v18.1.3000-beta2 [8/1/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

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

Section titled “v18.1.3000-beta3 [8/1/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

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

Section titled “v18.1.3000-beta4 [8/1/24]”

v18.1.3001 [8/4/24]

Section titled “v18.1.3001 [8/4/24]”updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3002 [8/4/24]

Section titled “v18.1.3002 [8/4/24]”updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3002 [8/5/24]

Section titled “v18.1.3002 [8/5/24]”updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3003 [8/5/24]

Section titled “v18.1.3003 [8/5/24]”updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3004 [8/5/24]

Section titled “v18.1.3004 [8/5/24]”updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3005 [8/5/24]

Section titled “v18.1.3005 [8/5/24]”updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3006 [8/5/24]

Section titled “v18.1.3006 [8/5/24]”updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3007 [8/5/24]

Section titled “v18.1.3007 [8/5/24]”updated package to conform with @windmillcode/angular-wml-components-base

v18.1.4000 [8/14/24]

Section titled “v18.1.4000 [8/14/24]”updated package to conform with @windmillcode/angular-wml-components-base

v18.1.4001 [8/14/24]

Section titled “v18.1.4001 [8/14/24]”updated package to conform with @windmillcode/angular-wml-components-base

v18.2.0 [8/15/24]

Section titled “v18.2.0 [8/15/24]”updated package to conform with @windmillcode/angular-wml-components-base

v18.2.1 [8/20/24]

Section titled “v18.2.1 [8/20/24]”updated package to conform with @windmillcode/angular-wml-components-base

v18.2.1000 [8/22/24]

Section titled “v18.2.1000 [8/22/24]”updated package to reflect the version 18.2.1 of @angular/core package

v18.2.2000 [8/30/24]

Section titled “v18.2.2000 [8/30/24]”updated package to reflect the version 18.2.2 of @angular/core package

v18.2.2100 [9/1/24]

Section titled “v18.2.2100 [9/1/24]”updated package to conform with @windmillcode/angular-wml-components-base

v18.2.2101 [9/1/24]

Section titled “v18.2.2101 [9/1/24]”updated package to conform with @windmillcode/angular-wml-components-base

v18.2.2200 [9/3/24]

Section titled “v18.2.2200 [9/3/24]”updated package to conform with @windmillcode/angular-wml-components-base

v18.2.3000 [9/4/24]

Section titled “v18.2.3000 [9/4/24]”updated package to reflect the version 18.2.3 of @angular/core package

v18.2.3100 [9/8/24]

Section titled “v18.2.3100 [9/8/24]”updated package to reflect the version 18.2.3 of @angular/core package

v18.2.3110 [9/10/24]

Section titled “v18.2.3110 [9/10/24]”updated package to conform with @windmillcode/angular-wml-components-base

v18.2.3112 [9/10/24]

Section titled “v18.2.3112 [9/10/24]”updated package to conform with @windmillcode/angular-wml-components-base

v18.2.4000 [9/16/24]

Section titled “v18.2.4000 [9/16/24]”updated package to reflect the version 18.2.4 of @angular/core package

v18.2.4100 [9/19/24]

Section titled “v18.2.4100 [9/19/24]”updated package to conform with @windmillcode/wml-components-base

v18.2.4200 [9/21/24]

Section titled “v18.2.4200 [9/21/24]”updated package to conform with @windmillcode/wml-components-base

v18.2.5001 [9/22/24]

Section titled “v18.2.5001 [9/22/24]”updated package to reflect the version 18.2.5 of @angular/core package

v18.2.6000 [10/1/24]

Section titled “v18.2.6000 [10/1/24]”updated package to reflect the version 18.2.6 of @angular/core package

v18.2.7000 [10/2/24]

Section titled “v18.2.7000 [10/2/24]”updated package to reflect the version 18.2.7 of @angular/core package

v18.2.7001 [10/5/24]

Section titled “v18.2.7001 [10/5/24]”updated package to conform with @windmillcode/wml-components-base

v18.2.7010 [10/9/24]

Section titled “v18.2.7010 [10/9/24]”updated package to conform with @windmillcode/wml-components-base

v18.2.7020 [10/10/24]

Section titled “v18.2.7020 [10/10/24]”updated package to conform with @windmillcode/wml-components-base

v18.2.8000 [10/10/24]

Section titled “v18.2.8000 [10/10/24]”updated package to reflect the version 18.2.8 of @angular/core package

v18.2.8000 [10/11/24]

Section titled “v18.2.8000 [10/11/24]”updated package to reflect the version 18.2.8 of @angular/core package

v18.2.8001 [10/11/24]

Section titled “v18.2.8001 [10/11/24]”updated package to conform with @windmillcode/wml-components-base

v18.2.9000 [10/23/24]

Section titled “v18.2.9000 [10/23/24]”updated package to conform with @windmillcode/wml-components-base

v18.2.10000 [10/31/24]

Section titled “v18.2.10000 [10/31/24]”updated package to conform with @windmillcode/wml-components-base

v18.2.11000 [11/7/24]

Section titled “v18.2.11000 [11/7/24]”updated package to conform with @windmillcode/wml-components-base

v18.2.12000 [11/15/24]

Section titled “v18.2.12000 [11/15/24]”updated package to conform with @windmillcode/wml-components-base

v18.2.12001 [11/17/24]

Section titled “v18.2.12001 [11/17/24]”updated package to conform with @windmillcode/wml-components-base

v19.0.0 [11/19/24]

Section titled “v19.0.0 [11/19/24]”updated package to conform with @windmillcode/wml-components-base

v19.0.3 [11/20/24]

Section titled “v19.0.3 [11/20/24]”updated package to conform with @windmillcode/wml-components-base

v19.0.4 [11/26/24]

Section titled “v19.0.4 [11/26/24]”updated package to conform with @windmillcode/wml-components-base

v19.0.1000 [11/26/24]

Section titled “v19.0.1000 [11/26/24]”updated package to conform with @windmillcode/wml-components-basePrevious WML FormNext WML Input