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.
To install the Angular WML Panel library, use the following npm command:
Terminal window
npm install --verbose @windmillcode/angular-wml-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<iframe src="https://stackblitz.com/edit/stackblitz-starters-p5rswq?ctl=1&embed=1&file=src%2Fmain.ts&theme=dark" style="width: 100%; height: calc(500/16 * 1em) !important;"></iframe>
| 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. |
| 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. |
| Method | Signature | Description |
|---|---|---|
| toggle | () => void |
Toggles the state of the panel item. |
| open | () => void |
Opens the panel item. |
| close | () => void |
Closes the panel item. |
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
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]
}
}),
// then
WmlPanelNGXTranslateModule
// for regular
WmlPanelModule
%!(EXTRA string=
updated package to reflect the version 16.2.80 of @angular/core package),
updated package to reflect the version 16.2.80 of @angular/core package,
updated package to reflect the version 16.2.90 of @angular/core package,
updated package to reflect the version 16.2.91 of @angular/core package,
updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
updated package to reflect the version ^17.0.2 of @angular/core package,
updated package to reflect the version ^17.0.4 of @angular/core package,
updated package to reflect the version ^17.0.5 of @angular/core package,
updated package to reflect the version ^17.0.6 of @angular/core package,
updated package to reflect the version ^17.0.7 of @angular/core package,
updated package to conform with @windmillcode/angular-wml-components-base ,
updated package to conform with @windmillcode/angular-wml-components-base ,
updated package to conform with @windmillcode/angular-wml-components-base ,
updated package to reflect the version ^17.0.8 of @angular/core package,
updated package to conform with @windmillcode/angular-wml-components-base ,
updated package to conform with @windmillcode/angular-wml-components-base ,
updated package to conform with @windmillcode/angular-wml-components-base ,
updated package to conform with @windmillcode/angular-wml-components-base ,
updated package to conform with @windmillcode/angular-wml-components-base ,
updated package to reflect the version ^17.1.0 of @angular/core package,
updated package to conform with @windmillcode/angular-wml-components-base ,
updated package to conform with @windmillcode/angular-wml-components-base ,
updated package to reflect the version ^17.1.2 of @angular/core package,
updated package to conform with @windmillcode/angular-wml-components-base ,
updated package to reflect the version ^17.1.3 of @angular/core package,
updated package to reflect the version ^17.2.1 of @angular/core package,
updated package to reflect the version ^17.2.2 of @angular/core package,
updated package to reflect the version ^17.2.3 of @angular/core package,
updated package to conform with @windmillcode/angular-wml-components-base ,
updated package to conform with @windmillcode/angular-wml-components-base ,
updated package to reflect the version ^17.2.4 of @angular/core package,
updated package to conform with @windmillcode/angular-wml-components-base ,
updated package to conform with @windmillcode/angular-wml-components-base ,
updated package to conform with @windmillcode/angular-wml-components-base ,
updated package to conform with @windmillcode/angular-wml-components-base ,
updated package to reflect the version ^17.3.0 of @angular/core package ,
updated package to reflect the version ^17.3.1 of @angular/core package,
updated package to reflect the version ^17.3.2 of @angular/core package,
updated package to reflect the version ^17.3.3 of @angular/core package,
updated package to reflect the version ^17.3.4 of @angular/core package,
updated package to conform with @windmillcode/angular-wml-components-base ,
updated package to reflect the version ^17.3.5 of @angular/core package,
updated package to conform with @windmillcode/angular-wml-components-base ,
updated package to reflect the version ^17.3.6 of @angular/core package,
updated package to reflect the version ^17.3.7 of @angular/core package,
updated package to reflect the version ^17.3.8 of @angular/core package,
updated package to reflect the version ^17.3.9 of @angular/core package,
updated package to reflect the version ^18.0.0 of @angular/core package,
updated package to conform with @windmillcode/angular-wml-components-base ,
updated package to reflect the version ^18.0.1 of @angular/core package,
updated package to reflect the version ^18.0.2 of @angular/core package,
updated package to reflect the version ^18.0.3 of @angular/core package,
updated package to conform with @windmillcode/angular-wml-components-base ,
updated package to conform with @windmillcode/angular-wml-components-base ,
updated package to reflect the version ^18.0.5 of @angular/core package,
updated package to reflect the version ^18.0.6 of @angular/core package,
updated package to reflect the version ^18.1.0 of @angular/core package,
updated package to conform with @windmillcode/angular-wml-components-base ,
updated package to reflect the version ^18.1.1 of @angular/core package,
updated package to reflect the version ^18.1.2 of @angular/core package,
updated package to conform with @windmillcode/angular-wml-components-base ,
updated package to conform with @windmillcode/angular-wml-components-base ,
updated package to conform with @windmillcode/angular-wml-components-base ,
updated package to conform with @windmillcode/angular-wml-components-base ,
updated package to conform with @windmillcode/angular-wml-components-base
updated package to conform with @windmillcode/angular-wml-components-base
updated package to conform with @windmillcode/angular-wml-components-base
updated package to conform with @windmillcode/angular-wml-components-base
updated package to conform with @windmillcode/angular-wml-components-base
updated package to conform with @windmillcode/angular-wml-components-base
updated package to conform with @windmillcode/angular-wml-components-base
updated package to conform with @windmillcode/angular-wml-components-base
updated package to conform with @windmillcode/angular-wml-components-base
updated package to conform with @windmillcode/angular-wml-components-base
updated package to conform with @windmillcode/angular-wml-components-base
updated package to conform with @windmillcode/angular-wml-components-base
updated package to reflect the version 18.2.1 of @angular/core package
updated package to reflect the version 18.2.2 of @angular/core package
updated package to conform with @windmillcode/angular-wml-components-base
updated package to conform with @windmillcode/angular-wml-components-base
updated package to conform with @windmillcode/angular-wml-components-base
updated package to reflect the version 18.2.3 of @angular/core package
updated package to reflect the version 18.2.3 of @angular/core package
updated package to conform with @windmillcode/angular-wml-components-base
updated package to conform with @windmillcode/angular-wml-components-base
updated package to conform with @windmillcode/wml-components-base
updated package to reflect the version 18.2.4 of @angular/core package
updated package to conform with @windmillcode/wml-components-base
updated package to conform with @windmillcode/wml-components-base
updated package to reflect the version 18.2.5 of @angular/core package
updated package to reflect the version 18.2.6 of @angular/core package
updated package to reflect the version 18.2.7 of @angular/core package
updated package to conform with @windmillcode/wml-components-base
updated package to conform with @windmillcode/wml-components-base
updated package to conform with @windmillcode/wml-components-base
updated package to reflect the version 18.2.8 of @angular/core package
updated package to reflect the version 18.2.8 of @angular/core package
updated package to conform with @windmillcode/wml-components-base
updated package to conform with @windmillcode/wml-components-base
updated package to conform with @windmillcode/wml-components-base
updated package to conform with @windmillcode/wml-components-base
updated package to conform with @windmillcode/wml-components-base
updated package to conform with @windmillcode/wml-components-base
updated package to conform with @windmillcode/wml-components-base