WML Panel
This content is for the 19.0.0 version. Switch to thelatest versionfor up-to-date documentation.
t The Angular WML Panel library is a sophisticated Angular module designed to offer a robust and versatile panel component system within Angular applications. This library is meticulously engineered to provide developers with a seamless and intuitive interface for creating, managing, and interactingtt with panels in their web applications. The core objective of the library is to streamline the process of panel management, offering a suite of features that cater to various panel-related needs, such as dynamic content loading, customization, and responsive layout management.
Central to the Angular WML Panel library are its principal components, which include the main panel container and various subcomponents designed for specific functionalities. The main panel component acts as the container, orchestrating the overall behavior and layout of the panel, while the subcomponents provide granular control over the panel’s content and interactive features. Developers can leverage these components to build intricate panel layouts, customize appearance and behavior, and dynamically load content based on application context or user interactions. The library emphasizes modularity and reusability, encouraging developers to utilize these components in a composable manner to construct complex yet maintainable panel structures. Furthermore, the library provides APIs and services that enable extensive customization and interactivity, allowing developers to tailor the panel’s functionality to meet the specific requirements of their applications.
Installation
To install the Angular WML Panel library, use the following npm command:
Terminal window
npm install --verbose @windmillcode/angular-wml-panelUsage
WMLPanelZeroComponent
Getting Started
Custom Panel
TRY YOUR self you can add additional panels to the items array and open and close them with easeTRY to get the panels to be different lengths so it can be more interactive
Reference
WMLPanelZeroProps Properties
| Property | Type | Description |
|---|---|---|
| container | WMLUIProperty | A property to customize the container of the panel. |
| items | Array<WMLPanelZeroItemProps> | An array of WMLPanelZeroItemProps to define panel items. |
WMLPanelZeroItemProps Properties
| Property | Type | Description |
|---|---|---|
| opened | BehaviorSubject<boolean | null> | A subject to control the opening of the panel item. |
| closed | BehaviorSubject<boolean | null> | A subject to control the closure of the panel item. |
| state | "open" | "closed" | Represents the current state of the panel item. |
| custom | WMLCustomComponent | A custom component to be used as the panel item’s content. |
WMLPanelZeroItemProps Methods
| Method | Signature | Description |
|---|---|---|
| toggle | () => void | Toggles the state of the panel item. |
| open | () => void | Opens the panel item. |
| close | () => void | Closes the panel item. |
Changelog
v0.1.0made WMLPanelItemProps.state private and ensured that you can have default state by calling WMLPanelItemProps.open if you want the panel open
v0.1.1closed panels dont slide backv0.1.2update to v16v0.1.3added a feature where the developer can added the container classv0.2.0fixed an issue where on it the panel would animate into the closed position
v1.0.0
fixed 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] } }),// thenWmlPanelNGXTranslateModule// for regularWmlPanelModule%!(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 conform with @windmillcode/angular-wml-components-base for unit testing features ,
v16.2.100
updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
v16.2.110
updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
v16.2.120
updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
v17.0.10
updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
v17.0.11
updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
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.2.1000 [2/17/24]
updated package to reflect the version ^17.2.1 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/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-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.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.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.3200 [9/16/24]
updated package to conform with @windmillcode/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
v19.0.3 [11/20/24]
updated package to conform with @windmillcode/wml-components-base
v19.0.4 [11/26/24]
updated package to conform with @windmillcode/wml-components-base
v19.0.1000 [11/26/24]
updated package to conform with @windmillcode/wml-components-base