Skip to content

WML Popup

starlightViewModes.switchTo

The Angular WML Popup library is an Angular-based toolkit designed to simplify the creation and management of pop-up components within web applications. It provides developers with a streamlined approach to integrate pop-ups, facilitating interactions and enhancing user engagement without the need for extensive boilerplate code. The library is crafted to address common challenges associated with pop-up management, such as dynamic content loading, positioning, and responsiveness, ensuring a versatile solution adaptable to various application scenarios.

Central to the Angular WML Popup library is the WMLPopupZeroComponent, which serves as the foundational element for pop-up creation and manipulation. This component is designed to be flexible, allowing for the embedding of custom content and the adjustment of its behavior and appearance through a range of input parameters. Developers can leverage the WMLPopupProps class to configure the pop-up, defining properties such as the component to display, its initialization parameters, and control mechanisms for opening and closing the pop-up. The library emphasizes interactivity and customization, providing mechanisms such as the togglePopupSubj subject to programmatically control the pop-up’s visibility. Furthermore, the library supports inter-component communication and dynamic content loading, enabling developers to create rich, interactive user experiences. By adhering to the library’s design patterns, such as utilizing WMLPopupZeroComponent as a container for dynamic content, developers can implement consistent and effective pop-up functionalities within their Angular applications.

Terminal window
npm install -s --verbose @windmillcode/angular-wml-popup
MethodSignatureDescription
cpntType<any>Component to be displayed within the popup.
openPopup() => voidOpens the popup.
closePopup() => voidCloses the popup.
togglePopupSubjSubject<boolean>Subject to toggle popup visibility (true for open, false for close).
  • added optional support for ngx translate to use ngxtranslate
// to use ngxtranslate
WMLPopupNgxTranslateModule
// to use regaular
WMLPopupModule
  • MAJOR rename to @windmillcode/angular-wml-popup
  • 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
  • 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
  • added openPopup closePopup and togglePopupSubj so developers can write less code ,
  • 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

[UPDATE] can now set id on the popup by calling props.openPopup or props.closePopup for example

this.baseService.popupProps.view.id = this.idPrefix("Pricing")
this.baseService.popupProps.openPopup()

,

  • updated package to reflect the version ^17.1.0 of @angular/core package
  • [FIX] fixed a bug where the param key passed to the WMLPopupProps was filtered out causing the component to not work properly ,
  • 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

[UPDATE] when clicking on the outer space of the popup the popup now closes without having to provide a feature to close it

[FIX] prevent the popup from closing click on the non-close area ,

  • 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
  • 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 19.0.2 of @angular/core package
  • updated package to reflect the version 19.0.3 of @angular/core package
  • updated package to reflect the version 19.0.4 of @angular/core package
  • updated package to reflect the version 19.0.5 of @angular/core package
  • updated package to conform with @windmillcode/wml-components-base
  • updated package to reflect the version 19.0.6 of @angular/core package
  • updated package to reflect the version 19.0.7 of @angular/core package
  • updated package to reflect the version 19.1.0 of @angular/core package
  • updated package to reflect the version 19.1.1 of @angular/core package
  • updated package to reflect the version 19.1.2 of @angular/core package
  • updated package to reflect the version 19.1.3 of @angular/core package
  • update package to support the react native ecosystem
  • updated package to conform with @windmillcode/wml-components-base
  • updated package to conform with @windmillcode/wml-components-base
  • updated package to reflect the version 19.1.4 of @angular/core package
  • updated package to reflect the version 19.1.5 of @angular/core package
  • updated package to reflect the version 19.1.6 of @angular/core package
  • updated package to reflect the version 19.1.7 of @angular/core package
  • updated package to reflect the version 19.1.8 of @angular/core package
  • updated package to reflect the version 19.2.0 of @angular/core package
  • updated package to reflect the version 19.2.1 of @angular/core package
  • updated package to reflect the version 19.2.2 of @angular/core package
  • updated package to reflect the version 19.2.3 of @angular/core package
  • updated package to reflect the version 19.2.4 of @angular/core package
  • updated package to reflect the version 19.2.5 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 reflect the version 19.2.8 of @angular/core package
  • updated package to reflect the version 19.2.9 of @angular/core package
  • updated package to reflect the version 19.2.10 of @angular/core package