WML Infinite Dropdown

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

Terminal window


npm install -s --verbose @windmillcode/angular-wml-infinite-dropdown

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

Basic Example

Customizing Dropdown Options

Adding Options

open the preview in a browser and view the hierachy for the true infinite dropdown<iframe src="https://stackblitz.com/edit/stackblitz-starters-cpmz6f?ctl=1&embed=1&file=src%2Fmain.ts&theme=dark" style="width: 100%; height: calc(500/16 * 1em) !important;"></iframe>

Clicking On A Menu Item

Reference

WMLInfiniteDropdownZeroProps

Property	Type	Description
`options`	`Array<WMLInfiniteDropdownZeroOption \| WMLInfiniteDropdownZeroProps>`	List of options or sub-dropdowns.
`customize`	`Object`	Object to customize dropdown and option properties.
`optionsSubj`	`Subject<WMLInfiniteDropdownZeroInputOptions>`	Subject to handle options updates.
`style`	`any`	Style object for custom styling.
`openClass`	`string`	Class name to be applied when the dropdown is open.
`closedClass`	`string`	Class name to be applied when the dropdown is closed.
`updateOptions`	`Function`	Function to update the dropdown options.
`getDropdownStates`	`Function`	Function to get the open and closed states of the dropdown.
`toggleDropdownViaDropdown`	`Function`	Function to toggle the dropdown on hover interaction.
`toggleDropdown`	`Function`	Function to programmatically toggle the dropdown.

WMLInfiniteDropdownZeroOption

Property	Type	Description
`text`	`string`	Display text for the dropdown option.
`dropdown`	`WMLInfiniteDropdownZeroProps`	Nested dropdown parameters, if any.
`openDropdown`	`Function`	Function to programmatically open the dropdown.
`closeDropdown`	`Function`	Function to programmatically close the dropdown.
`custom`	`WMLCustomComponent`	Custom component to be used as the dropdown item.
`detectChangeSubj`	`Subject<void>`	Subject to handle change detection.
`clickPredicate`	`Function`	Predicate function to be called on click.

Changelog

.0.0.1

infinite dropdown supported

. 0.0.2

custom dropdown entries supported

. 0.1.0

able to customerize option containers able to specficy an interactionType of hover or click

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

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

v0.1.3removed unneeded WmlInfiniteDropdownComponent.listenForOptions changes

v0.1.4removed a console.log stmt

v0.1.5added cursor pointer to the WmlInfiniteDropdownItemComponentv0.2.0added closeDropdown and openDropdownv0.2.1addded WMLInfiniteDropdownOptionBase to help with typing issues using as base for options and dropdown classes. added id for optionsProps for e2e testing

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]


      }


    }),

// then
WmlInfiniteDropdownZeroNGXTranslateModule
// for regular
WmlInfiniteDropdownZeroModule

v1.0.2

added isPresnt support to hide the p tag for wml-sample-dropdown-option

v1.0.3

remove max width for dropdown items

v1.1.0

added cdref access to WmlInfiniteDropdownOption and WmlInfiniteDropdownProps which extends WMLView

v1.1.1

added components cdref to WmlInfiniteDropdownProps %!(EXTRA string=

v16.2.80

updated package to reflect the version 16.2.80 of @angular/core package),

v16.2.80

updated package to reflect the version 16.2.80 of @angular/core package,

v16.2.90

updated package to reflect the version 16.2.90 of @angular/core package,

v16.2.91

updated package to reflect the version 16.2.91 of @angular/core package,

v16.2.93

updated package to reflect the version v16.2.93 of @angular/core package, ,

v16.2.100

updated package to reflect the version v16.2.100 of @angular/core package, ,

v16.2.110

updated package to reflect the version v16.2.110 of @angular/core package, ,

v16.2.120

updated package to reflect the version v16.2.120 of @angular/core package, ,

v17.0.10

updated package to reflect the version v17.0.10 of @angular/core package, ,

v17.0.11

updated package to reflect the version v17.0.11 of @angular/core package,

v17.0.12

updated css and scss variables for the component to be indepent of windmillcode applications ,

v17.0.20

updated package to reflect the version ^17.0.2 of @angular/core package,

v17.0.40

updated package to reflect the version ^17.0.4 of @angular/core package,

v17.0.50

updated package to reflect the version ^17.0.5 of @angular/core package,

v17.0.60

updated package to reflect the version ^17.0.6 of @angular/core package,

v17.0.70

updated package to reflect the version ^17.0.7 of @angular/core package,

v17.0.7100

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

v17.0.7200

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

v17.0.7300

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

v17.0.80

updated package to reflect the version ^17.0.8 of @angular/core package,

v17.0.8100

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

v17.0.8102

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

v17.0.8103

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

v17.0.9000

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

v17.0.9001

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

v17.1.0000

updated package to reflect the version ^17.1.0 of @angular/core package,

v17.1.2

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

v17.1.1000

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

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]

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

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]

added isPresent to WmlInfiniteDropdownProps constructor ,

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]

updated package to reflect the version ^17.2.2 of @angular/core package,

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]

updated package to reflect the version ^17.2.3 of @angular/core package,

v17.2.3001 [3/2/24]

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

v17.2.3002 [3/5/24]

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

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]

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

v17.2.4002 [3/12/24]

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

v17.2.4003 [3/13/24]

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

v17.2.4004 [3/13/24]

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

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]

updated package to reflect the version ^17.3.1 of @angular/core package,

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]

updated package to reflect the version ^17.3.3 of @angular/core package,

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]

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

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]

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

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]

updated package to reflect the version ^17.3.7 of @angular/core package,

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]

updated package to reflect the version ^17.3.9 of @angular/core package,

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]

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

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]

updated package to reflect the version ^18.0.2 of @angular/core package,

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]

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

v18.0.4000 [6/23/24]

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

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]

updated package to reflect the version ^18.0.6 of @angular/core package,

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]

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

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]

updated package to reflect the version ^18.1.2 of @angular/core package

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]

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

v18.1.2301 [7/30/24]

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

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 ,

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

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

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

v18.1.3001 [8/4/24]

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

v18.1.3002 [8/4/24]

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

v18.1.3002 [8/5/24]

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

v18.1.3003 [8/5/24]

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

v18.1.3004 [8/5/24]

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

v18.1.3005 [8/5/24]

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

v18.1.3006 [8/5/24]

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

v18.1.3007 [8/5/24]

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

v18.1.4000 [8/14/24]

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

v18.1.4001 [8/14/24]

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

v18.2.0 [8/15/24]

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

v18.2.1 [8/20/24]

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

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]

updated package to reflect the version 18.2.2 of @angular/core package

v18.2.2100 [9/1/24]

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

v18.2.2101 [9/1/24]

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

v18.2.2200 [9/3/24]

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

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]

updated package to reflect the version 18.2.3 of @angular/core package

v18.2.3110 [9/10/24]

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

v18.2.3112 [9/10/24]

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

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]

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

v18.2.4200 [9/21/24]

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

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]

updated package to reflect the version 18.2.6 of @angular/core package

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]

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

v18.2.7010 [10/9/24]

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

v18.2.7020 [10/10/24]

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

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]

updated package to reflect the version 18.2.8 of @angular/core package

v18.2.8001 [10/11/24]

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

v18.2.9000 [10/23/24]

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

v18.2.10000 [10/31/24]

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

v18.2.11000 [11/7/24]

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

v18.2.12000 [11/15/24]

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

v18.2.12001 [11/17/24]

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

v19.0.0 [11/19/24]

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