[starlightViewModes.switchTo](/Windmillcode-Angular-CDK-Docs/zen-mode/19.0.0/angular-components/wml-popup)function h(){const t=window.location.hash;document.querySelectorAll(".starlight-view-modes-switcher-a").forEach(e=>{e.href&&(e.href=e.href.split("#")
npm install @windmillcode/angular-wml-popupstarlightViewModes.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 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.
Section titled “Installation”Terminal window npm install -s --verbose @windmillcode/angular-wml-popup
WMLPopupZeroComponent Section titled “Usage WMLPopupZeroComponent”
Section titled “Getting Started”
Section titled “WMLPopupZeroProps Methods”
| Method | Signature | Description |
|---|---|---|
| cpnt | Type<any> | Component to be displayed within the popup. |
| openPopup | () => void | Opens the popup. |
| closePopup | () => void | Closes the popup. |
| togglePopupSubj | Subject<boolean> | Subject to toggle popup visibility (true for open, false for close). |
Section titled “Changelog”v1.0.0added optional support for ngx translate to use ngxtranslate// to use ngxtranslateWMLPopupNgxTranslateModule// to use regaularWMLPopupModule
Section titled “v1.0.0”MAJOR rename to @windmillcode/angular-wml-popupfixed 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
Section titled “v16.2.80”updated package to reflect the version 16.2.80 of @angular/core package),
Section titled “v16.2.80”updated package to reflect the version 16.2.80 of @angular/core package,
Section titled “v16.2.90”updated package to reflect the version 16.2.90 of @angular/core package,
Section titled “v16.2.91”updated package to reflect the version 16.2.91 of @angular/core package,
Section titled “v16.2.93”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
Section titled “v16.2.100”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
Section titled “v16.2.110”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
Section titled “v16.2.120”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
Section titled “v17.0.10”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
Section titled “v17.0.11”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
Section titled “v17.0.20”updated package to reflect the version ^17.0.2 of @angular/core package,
Section titled “v17.0.40”updated package to reflect the version ^17.0.4 of @angular/core package,
Section titled “v17.0.50”updated package to reflect the version ^17.0.5 of @angular/core package,
Section titled “v17.0.60”updated package to reflect the version ^17.0.6 of @angular/core package,
Section titled “v17.0.70”updated package to reflect the version ^17.0.7 of @angular/core package
Section titled “v17.0.71”added openPopup closePopup and togglePopupSubj so developers can write less code
,
Section titled “v17.0.7100”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.0.7200”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.0.7300”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.0.80”updated package to reflect the version ^17.0.8 of @angular/core package,
Section titled “v17.0.8100”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.0.8102”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.0.8103”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.0.9000”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.0.9001”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v17.0.9002”[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()
,
Section titled “v17.1.0000”updated package to reflect the version ^17.1.0 of @angular/core package
Section titled “v17.1.0001”[FIX] fixed a bug where the param key passed to the WMLPopupProps was filtered out causing the component to not work properly
,
Section titled “v17.1.2”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.1.1000”updated package to conform with @windmillcode/angular-wml-components-base ,
[Section titled “v17.1.2000 [2/5/24]”](#v1712000-2524)updated package to reflect the version ^17.1.2 of @angular/core package,
[Section titled “v17.1.2001 [2/8/24]”](#v1712001-2824)updated package to conform with @windmillcode/angular-wml-components-base ,
[Section titled “v17.1.3000 [2/8/24]”](#v1713000-2824)updated package to reflect the version ^17.1.3 of @angular/core package,
[Section titled “v17.2.1000 [2/17/24]”](#v1721000-21724)updated package to reflect the version ^17.2.1 of @angular/core package,
[Section titled “v17.2.2001 [2/23/24]”](#v1722001-22324)updated package to reflect the version ^17.2.2 of @angular/core package,
[Section titled “v17.2.3000 [2/28/24]”](#v1723000-22824)updated package to reflect the version ^17.2.3 of @angular/core package,
[Section titled “v17.2.3001 [3/2/24]”](#v1723001-3224)updated package to conform with @windmillcode/angular-wml-components-base ,
[Section titled “v17.2.3002 [3/5/24]”](#v1723002-3524)updated package to conform with @windmillcode/angular-wml-components-base ,
[Section titled “v17.2.4000 [3/8/24]”](#v1724000-3824)updated package to reflect the version ^17.2.4 of @angular/core package,
[Section titled “v17.2.4001 [3/12/24]”](#v1724001-31224)updated package to conform with @windmillcode/angular-wml-components-base ,
[Section titled “v17.2.4002 [3/12/24]”](#v1724002-31224)updated package to conform with @windmillcode/angular-wml-components-base ,
[Section titled “v17.2.4003 [3/13/24]”](#v1724003-31324)updated package to conform with @windmillcode/angular-wml-components-base ,
[Section titled “v17.2.4004 [3/13/24]”](#v1724004-31324)updated package to conform with @windmillcode/angular-wml-components-base ,
[Section titled “v17.3.0 [3/17/24]”](#v1730-31724)updated package to reflect the version ^17.3.0 of @angular/core package
,
[Section titled “v17.3.1000 [3/22/24]”](#v1731000-32224)updated package to reflect the version ^17.3.1 of @angular/core package,
[Section titled “v17.3.2000 [3/28/24]”](#v1732000-32824)updated package to reflect the version ^17.3.2 of @angular/core package,
[Section titled “v17.3.3000 [4/4/24]”](#v1733000-4424)updated package to reflect the version ^17.3.3 of @angular/core package,
[Section titled “v17.3.4000 [4/11/24]”](#v1734000-41124)updated package to reflect the version ^17.3.4 of @angular/core package,
[Section titled “v17.3.4001 [4/16/24]”](#v1734001-41624)updated package to conform with @windmillcode/angular-wml-components-base ,
[Section titled “v17.3.5000 [4/20/24]”](#v1735000-42024)updated package to reflect the version ^17.3.5 of @angular/core package,
[Section titled “v17.3.5110 [5/1/24]”](#v1735110-5124)updated package to conform with @windmillcode/angular-wml-components-base ,
[Section titled “v17.3.6000 [5/1/24]”](#v1736000-5124)updated package to reflect the version ^17.3.6 of @angular/core package,
[Section titled “v17.3.7000 [5/9/24]”](#v1737000-5924)updated package to reflect the version ^17.3.7 of @angular/core package,
[Section titled “v17.3.8000 [5/9/24]”](#v1738000-5924)updated package to reflect the version ^17.3.8 of @angular/core package,
[Section titled “v17.3.9000 [5/16/24]”](#v1739000-51624)updated package to reflect the version ^17.3.9 of @angular/core package,
[Section titled “v18.0.1 [5/23/24]”](#v1801-52324)updated package to reflect the version ^18.0.0 of @angular/core package
[Section titled “v18.0.2 [5/24/2024 12:45:23 PM EST]”](#v1802-5242024-124523-pm-est)[UPDATE] when clicking on the outer space of the popup the popup now closes without having to provide a feature to close it
[Section titled “v18.0.3 [5/24/2024 11:03:23 AM EST]”](#v1803-5242024-110323-am-est)[FIX] prevent the popup from closing click on the non-close area
,
[Section titled “v18.0.4 [5/25/24]”](#v1804-52524)updated package to conform with @windmillcode/angular-wml-components-base ,
[Section titled “v18.0.1000 [5/29/24]”](#v1801000-52924)updated package to reflect the version ^18.0.1 of @angular/core package,
[Section titled “v18.0.2000 [6/6/24]”](#v1802000-6624)updated package to reflect the version ^18.0.2 of @angular/core package,
[Section titled “v18.0.3000 [6/13/24]”](#v1803000-61324)updated package to reflect the version ^18.0.3 of @angular/core package,
[Section titled “v18.0.3010 [6/18/24]”](#v1803010-61824)updated package to conform with @windmillcode/angular-wml-components-base ,
[Section titled “v18.0.4000 [6/23/24]”](#v1804000-62324)updated package to conform with @windmillcode/angular-wml-components-base ,
[Section titled “v18.0.5000 [6/26/24]”](#v1805000-62624)updated package to reflect the version ^18.0.5 of @angular/core package,
[Section titled “v18.0.6000 [7/5/24]”](#v1806000-7524)updated package to reflect the version ^18.0.6 of @angular/core package,
[Section titled “v18.1.4 [7/13/24]”](#v1814-71324)updated package to reflect the version ^18.1.0 of @angular/core package,
[Section titled “v18.1.6 [7/14/24]”](#v1816-71424)updated package to conform with @windmillcode/angular-wml-components-base ,
[Section titled “v18.1.1000 [7/18/24]”](#v1811000-71824)updated package to reflect the version ^18.1.1 of @angular/core package,
[Section titled “v18.1.2000 [7/24/24]”](#v1812000-72424)updated package to reflect the version ^18.1.2 of @angular/core package,
[Section titled “v18.1.2300 [7/27/24]”](#v1812300-72724)updated package to conform with @windmillcode/angular-wml-components-base ,
[Section titled “v18.1.2301 [7/30/24]”](#v1812301-73024)updated package to conform with @windmillcode/angular-wml-components-base
,
[Section titled “v18.1.3000-beta2 [8/1/24]”](#v1813000-beta2-8124)updated package to conform with @windmillcode/angular-wml-components-base ,
[Section titled “v18.1.3000-beta3 [8/1/24]”](#v1813000-beta3-8124)updated package to conform with @windmillcode/angular-wml-components-base ,
[Section titled “v18.1.3000-beta4 [8/1/24]”](#v1813000-beta4-8124)
[Section titled “v18.1.3001 [8/4/24]”](#v1813001-8424)updated package to conform with @windmillcode/angular-wml-components-base
[Section titled “v18.1.3002 [8/4/24]”](#v1813002-8424)updated package to conform with @windmillcode/angular-wml-components-base
[Section titled “v18.1.3003 [8/5/24]”](#v1813003-8524)updated package to conform with @windmillcode/angular-wml-components-base
[Section titled “v18.1.3004 [8/5/24]”](#v1813004-8524)updated package to conform with @windmillcode/angular-wml-components-base
[Section titled “v18.1.3004 [8/5/24]”](#v1813004-8524-1)updated package to conform with @windmillcode/angular-wml-components-base
[Section titled “v18.1.3005 [8/5/24]”](#v1813005-8524)updated package to conform with @windmillcode/angular-wml-components-base
[Section titled “v18.1.3006 [8/5/24]”](#v1813006-8524)updated package to conform with @windmillcode/angular-wml-components-base
[Section titled “v18.1.3007 [8/5/24]”](#v1813007-8524)updated package to conform with @windmillcode/angular-wml-components-base
[Section titled “v18.1.4000 [8/14/24]”](#v1814000-81424)updated package to conform with @windmillcode/angular-wml-components-base
[Section titled “v18.1.4001 [8/14/24]”](#v1814001-81424)updated package to conform with @windmillcode/angular-wml-components-base
[Section titled “v18.2.0 [8/15/24]”](#v1820-81524)updated package to conform with @windmillcode/angular-wml-components-base
[Section titled “v18.2.1 [8/20/24]”](#v1821-82024)updated package to conform with @windmillcode/angular-wml-components-base
[Section titled “v18.2.1000 [8/22/24]”](#v1821000-82224)updated package to reflect the version 18.2.1 of @angular/core package
[Section titled “v18.2.2000 [8/30/24]”](#v1822000-83024)updated package to reflect the version 18.2.2 of @angular/core package
[Section titled “v18.2.2100 [9/1/24]”](#v1822100-9124)updated package to conform with @windmillcode/angular-wml-components-base
[Section titled “v18.2.2101 [9/1/24]”](#v1822101-9124)updated package to conform with @windmillcode/angular-wml-components-base
[Section titled “v18.2.2200 [9/3/24]”](#v1822200-9324)updated package to conform with @windmillcode/angular-wml-components-base
[Section titled “v18.2.3000 [9/4/24]”](#v1823000-9424)updated package to reflect the version 18.2.3 of @angular/core package
[Section titled “v18.2.3100 [9/8/24]”](#v1823100-9824)updated package to reflect the version 18.2.3 of @angular/core package
[Section titled “v18.2.3110 [9/10/24]”](#v1823110-91024)updated package to conform with @windmillcode/angular-wml-components-base
[Section titled “v18.2.3112 [9/10/24]”](#v1823112-91024)updated package to conform with @windmillcode/angular-wml-components-base
[Section titled “v18.2.3200 [9/16/24]”](#v1823200-91624)updated package to conform with @windmillcode/wml-components-base
[Section titled “v18.2.4000 [9/16/24]”](#v1824000-91624)updated package to reflect the version 18.2.4 of @angular/core package
[Section titled “v18.2.4100 [9/19/24]”](#v1824100-91924)updated package to conform with @windmillcode/wml-components-base
[Section titled “v18.2.4200 [9/21/24]”](#v1824200-92124)updated package to conform with @windmillcode/wml-components-base
[Section titled “v18.2.5001 [9/22/24]”](#v1825001-92224)updated package to reflect the version 18.2.5 of @angular/core package
[Section titled “v18.2.6000 [10/1/24]”](#v1826000-10124)updated package to reflect the version 18.2.6 of @angular/core package
[Section titled “v18.2.7000 [10/2/24]”](#v1827000-10224)updated package to reflect the version 18.2.7 of @angular/core package
[Section titled “v18.2.7001 [10/5/24]”](#v1827001-10524)updated package to conform with @windmillcode/wml-components-base
[Section titled “v18.2.7010 [10/9/24]”](#v1827010-10924)updated package to conform with @windmillcode/wml-components-base
[Section titled “v18.2.7020 [10/10/24]”](#v1827020-101024)updated package to conform with @windmillcode/wml-components-base
[Section titled “v18.2.8000 [10/10/24]”](#v1828000-101024)updated package to reflect the version 18.2.8 of @angular/core package
[Section titled “v18.2.8000 [10/11/24]”](#v1828000-101124)updated package to reflect the version 18.2.8 of @angular/core package
[Section titled “v18.2.8001 [10/11/24]”](#v1828001-101124)updated package to conform with @windmillcode/wml-components-base
[Section titled “v18.2.9000 [10/23/24]”](#v1829000-102324)updated package to conform with @windmillcode/wml-components-base
[Section titled “v18.2.10000 [10/31/24]”](#v18210000-103124)updated package to conform with @windmillcode/wml-components-base
[Section titled “v18.2.11000 [11/7/24]”](#v18211000-11724)updated package to conform with @windmillcode/wml-components-base
[Section titled “v18.2.12000 [11/15/24]”](#v18212000-111524)updated package to conform with @windmillcode/wml-components-base
[Section titled “v18.2.12001 [11/17/24]”](#v18212001-111724)updated package to conform with @windmillcode/wml-components-base
[Section titled “v19.0.0 [11/19/24]”](#v1900-111924)updated package to conform with @windmillcode/wml-components-base
[Section titled “v19.0.3 [11/20/24]”](#v1903-112024)updated package to conform with @windmillcode/wml-components-base
[Section titled “v19.0.4 [11/26/24]”](#v1904-112624)updated package to conform with @windmillcode/wml-components-base
[Section titled “v19.0.1000 [11/26/24]”](#v1901000-112624)updated package to conform with @windmillcode/wml-components-basePrevious
WML PanelNext
WML Schematics