WML Button

starlightViewModes.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 wml-button library is an Angular-focused toolkit designed to provide developers with versatile and customizable button components. Its primary goal is to offer a streamlined approach to implementing interactive buttons within Angular applications, addressing common challenges such as dynamic content loading, user interaction handling, and flexible styling. By delivering a set of modular and adaptable components, the library aims to enhance the development workflow and enrich the user experience across diverse application scenarios.

The library includes two primary components:

WMLButtonZeroComponent: A comprehensive component offering deep customization options.WMLButtonOneComponent: A simpler alternative for basic button needs with less complexity.

Installation

Section titled “Installation”Terminal window

npm install -s --verbose @windmillcode/angular-wml-button

WMLButtonOne

Section titled “WMLButtonOne”

$3

Section titled “Usage”

$3

Section titled “Getting Started”Button-One is suitable for most tasks

$3

Section titled “Change Button Text And Color”

$3

Section titled “Create Click Action”

$3

Section titled “Set Icon”Use the url to any icon of your choice

$3

Section titled “Change Button Types”

WMLButtonZero

Section titled “WMLButtonZero”Button-Zero is for advanced customization

$3

Section titled “Set Icon”Use the url to any icon of your choice

$3

Section titled “Change Button Types”

Reference

Section titled “Reference”

$3

Section titled “Properties”

$3

Section titled “WMLButtonZeroProps”

Property	Type	Description
`id`	`string`	Unique identifier for the button component.
`cdref`	`ChangeDetectorRef`	Optional. Angular’s `ChangeDetectorRef` associated with the component for triggering change detection manually.
`updateSubj`	`Subject<Partial<WMLButtonZeroProps>>`	Subject to emit updates for the component. Useful for reactive programming patterns.
`type`	`WMLButtonPropsTypeEnum`	The type of the button, determining its styling. Can be `PRIMARY`, `SECONDARY`, or `TERTIARY`. Uses a getter/setter to handle the internal state and update button classes dynamically.
`text`	`WMLUIProperty`	Property that configures the display text of the button, defaulting to “Click Me”.
`button`	`WMLUIProperty`	Property that configures the button behavior, including a click handler with a default alert action.
`icons`	`Array<WMLImage<any, WMLButtonIconType>>`	An array of icon objects representing the button’s icons. By default, this is set to a single font-awesome icon, with the icon type defaulting to `img`.
`attr`	`Object`	An object containing additional HTML attributes for the button, including:
`attr.type`	`“submit"`	"reset"

$3

Section titled “WMLButtonOneProps”

Property	Type	Description
`btnClass`	`string`	Gets or sets the button’s primary CSS class.
`btnStyle`	`Partial<CSSStyleDeclaration>`	Partial CSS styles for the button.
`btnIsPresent`	`boolean`	Indicates whether the button is present in the DOM.
`type`	`WMLButtonPropsTypeEnum`	The type of the button, influencing its styling. Can be `PRIMARY`, `SECONDARY`, or `TERTIARY`.
`iconType`	`WMLButtonIconType`	The type of icon used in the button.
`text`	`string`	The display text of the button. Default is `"Click Me"`.
`iconClass`	`string`	Gets or sets the icon’s CSS class.
`iconSrc`	`string`	Source URL of the icon.
`iconAlt`	`string`	Alt text for the icon, used for accessibility.
`iconIsPresent`	`boolean`	Indicates whether the icon is present.
`textIsPresent`	`boolean`	Indicates whether the text is present in the button.
`click`	`(evt?) => void`	Function that handles the button click event. Default action is an alert.
`updateSubj`	`Subject<Partial<WMLButtonOneProps>>`	Subject to emit updates for the component.
`link`	`string`	URL to which the button links, if it’s a link button.
`routerLink`	`string`	Angular router link to navigate when the button is clicked.
`attr`	`Object`	An object containing additional HTML attributes for the button, including:
`attr.type`	“submit"	"reset"

$3

Section titled “Methods”

$3

Section titled “WMLButtonZeroProps” constructor(props: Partial<WMLButtonZeroProps> = {}) : Initializes a new instance of the WMLButtonZeroProps class with optional parameters for customization. updateBtnClasses(value: WMLButtonPropsTypeEnum) : Updates the button’s classes based on the specified type ( PRIMARY , SECONDARY , or TERTIARY ).

$3

Section titled “WMLButtonOneProps” constructor(props: Partial<WMLButtonOneProps> = {}) : Initializes a new instance of the WMLButtonOneProps class with optional parameters for customization. updateBtnClassString(value: string) : Updates the button’s primary CSS class. updateBtnClasses(value: WMLButtonPropsTypeEnum) : Updates the button’s classes based on the specified type ( PRIMARY , SECONDARY , or TERTIARY ). click(evt?) : Custom click handler for the button.

Changelog

Section titled “Changelog”v0.0.1
button is ready to be usedv0.0.2
include cursor pointer for the button viewv0.0.3
gave hover functionality to the button1.0.0
BREAKING change WMLButtonZeroProps.icon changed to WMLButtonZeroProps.icons to represent the multiple icons one can have on the button
WMLButtonZeroProps.icons[number] which is a WMLImage now has type of img or icon, if a type is not specified an img is used
the icon comes before the text and not after the text2.0.0
BREAKING CHANGE
WMLButtonZeroPropsTypeEnum renamed to WMLButtonPropsTypeEnum
created wml-button-one component which leverages wmlButton for easier button creation2.1.0full support for wml-button-one2.1.1add WMLButtonOneProps.btnIsPresent to show and hide buttons3.0.0ensured that there is support for ngx-translate and non ngx-translate featuresto enable translation

export function HttpLoaderFactory(http: HttpClient) {

return new TranslateHttpLoader(http);

}

HttpClientModule,

WMLButtonZeroModule

.forChild(

new WMLModuleForRootProps({

ngxTranslateLoaderFactory:HttpLoaderFactory

})

),

to disable translation

WMLButtonZeroModule

$3

Section titled “v4.0.1”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

WMLButtonZeroNGXTranslateModule

// for regular

WMLButtonZeroModule

$3

Section titled “v4.0.5”added css id support, and made cdref available on the props

$3

Section titled “v4.0.7”add id support on the selector element itself

$3

Section titled “v16.2.70”for wmlbuttonzero, added additional wmluiproperty to button zero,

$3

Section titled “v16.2.80”updated package to reflect the version 16.2.80 of @angular/core package,

$3

Section titled “v16.2.90”updated package to reflect the version 16.2.90 of @angular/core package,

$3

Section titled “v16.2.91”updated package to reflect the version 16.2.91 of @angular/core package,

$3

Section titled “v16.2.93”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

$3

Section titled “v16.2.100”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

$3

Section titled “v16.2.110”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

$3

Section titled “v16.2.120”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

$3

Section titled “v17.0.10”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

$3

Section titled “v17.0.11”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

$3

Section titled “v17.0.20”updated package to reflect the version ^17.0.2 of @angular/core package,

$3

Section titled “v17.0.40”updated package to reflect the version ^17.0.4 of @angular/core package,

$3

Section titled “v17.0.50”updated package to reflect the version ^17.0.5 of @angular/core package,

$3

Section titled “v17.0.60”updated package to reflect the version ^17.0.6s of @angular/core package,

$3

Section titled “v17.0.70”updated package to reflect the version ^17.0.7 of @angular/core package,

$3

Section titled “v17.0.7100”updated package to conform with @windmillcode/angular-wml-components-base ,

$3

Section titled “v17.0.7200”updated package to conform with @windmillcode/angular-wml-components-base ,

$3

Section titled “v17.0.7300”updated package to conform with @windmillcode/angular-wml-components-base ,

$3

Section titled “v17.0.80”updated package to reflect the version ^17.0.8 of @angular/core package,

$3

Section titled “v17.0.8100”updated package to conform with @windmillcode/angular-wml-components-base ,

$3

Section titled “v17.0.8102”updated package to conform with @windmillcode/angular-wml-components-base

$3

Section titled “v17.0.8103”[FIX] ensured that change detection was working for buttons
,

$3

Section titled “v17.0.8103”updated package to conform with @windmillcode/angular-wml-components-base

$3

Section titled “v17.0.8104”[FIX] toggle margin between icon and text for wml-button-one when iconIsPresent is set to true
,

$3

Section titled “v17.0.9000”updated package to conform with @windmillcode/angular-wml-components-base ,

$3

Section titled “v17.0.9001”updated package to conform with @windmillcode/angular-wml-components-base

$3

Section titled “v17.0.9002”updated WMLButtonOneProps.click to have optional evt paramaeter
,

$3

Section titled “v17.1.0000”updated package to reflect the version ^17.1.0 of @angular/core package,

$3

Section titled “v17.1.2”updated package to conform with @windmillcode/angular-wml-components-base ,

$3

Section titled “v17.1.1000”updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v17.1.2000 [2/5/24]”](#v1712000-2524)updated package to reflect the version ^17.1.2 of @angular/core package,

$3

[Section titled “v17.1.2001 [2/8/24]”](#v1712001-2824)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v17.1.2002 [2/8/24]”](#v1712002-2824)corrected code so no text should wrap if the text overflows the button
,

$3

[Section titled “v17.1.3000 [2/8/24]”](#v1713000-2824)updated package to reflect the version ^17.1.3 of @angular/core package,

$3

[Section titled “v17.2.1000 [2/17/24]”](#v1721000-21724)updated package to reflect the version ^17.2.1 of @angular/core package

$3

[Section titled “v17.2.1001 [2/21/24]”](#v1721001-22124)[UPDATE] added WMLButtonZeroProps.listenForUpdate amd WMLButtonOneProps.listenForUpdate so changes that dont reflect by assignment would reflect this way

$3

[Section titled “v17.2.2000 [2/23/24]”](#v1722000-22324)updated package to reflect the version ^17.2.2 of @angular/core package,

$3

[Section titled “v17.2.2001 [2/23/24]”](#v1722001-22324)updated package to reflect the version ^17.2.2 of @angular/core package,

$3

[Section titled “v17.2.3000 [2/28/24]”](#v1723000-22824)updated package to reflect the version ^17.2.3 of @angular/core package,

$3

[Section titled “v17.2.3001 [3/2/24]”](#v1723001-3224)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v17.2.3002 [3/5/24]”](#v1723002-3524)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v17.2.4000 [3/8/24]”](#v1724000-3824)updated package to reflect the version ^17.2.4 of @angular/core package,

$3

[Section titled “v17.2.4001 [3/12/24]”](#v1724001-31224)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v17.2.4002 [3/12/24]”](#v1724002-31224)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v17.2.4003 [3/13/24]”](#v1724003-31324)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v17.2.4004 [3/13/24]”](#v1724004-31324)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v17.3.0 [3/17/24]”](#v1730-31724)updated package to reflect the version ^17.3.0 of @angular/core package
,

$3

[Section titled “v17.3.1000 [3/22/24]”](#v1731000-32224)updated package to reflect the version ^17.3.1 of @angular/core package,

$3

[Section titled “v17.3.2000 [3/28/24]”](#v1732000-32824)updated package to reflect the version ^17.3.2 of @angular/core package,

$3

[Section titled “v17.3.3000 [4/4/24]”](#v1733000-4424)updated package to reflect the version ^17.3.3 of @angular/core package,

$3

[Section titled “v17.3.4000 [4/11/24]”](#v1734000-41124)updated package to reflect the version ^17.3.4 of @angular/core package,

$3

[Section titled “v17.3.4001 [4/16/24]”](#v1734001-41624)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v17.3.5000 [4/20/24]”](#v1735000-42024)updated package to reflect the version ^17.3.5 of @angular/core package,

$3

[Section titled “v17.3.5110 [5/1/24]”](#v1735110-5124)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v17.3.6000 [5/1/24]”](#v1736000-5124)updated package to reflect the version ^17.3.6 of @angular/core package,

$3

[Section titled “v17.3.7000 [5/9/24]”](#v1737000-5924)updated package to reflect the version ^17.3.7 of @angular/core package,

$3

[Section titled “v17.3.8000 [5/9/24]”](#v1738000-5924)updated package to reflect the version ^17.3.8 of @angular/core package,

$3

[Section titled “v17.3.9000 [5/16/24]”](#v1739000-51624)updated package to reflect the version ^17.3.9 of @angular/core package,

$3

[Section titled “v18.0.0 [5/22/24]”](#v1800-52224)updated package to reflect the version ^18.0.0 of @angular/core package,

$3

[Section titled “v18.0.1 [5/22/24]”](#v1801-52224)updated package to reflect the version ^18.0.0 of @angular/core package,

$3

[Section titled “v18.0.4 [5/25/24]”](#v1804-52524)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v18.0.1000 [5/29/24]”](#v1801000-52924)updated package to reflect the version ^18.0.1 of @angular/core package,

$3

[Section titled “v18.0.2000 [6/6/24]”](#v1802000-6624)updated package to reflect the version ^18.0.2 of @angular/core package,

$3

[Section titled “v18.0.3000 [6/13/24]”](#v1803000-61324)updated package to reflect the version ^18.0.3 of @angular/core package,

$3

[Section titled “v18.0.3010 [6/18/24]”](#v1803010-61824)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v18.0.4000 [6/23/24]”](#v1804000-62324)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v18.0.5000 [6/26/24]”](#v1805000-62624)updated package to reflect the version ^18.0.5 of @angular/core package,

$3

[Section titled “v18.0.6000 [7/5/24]”](#v1806000-7524)updated package to reflect the version ^18.0.6 of @angular/core package,

$3

[Section titled “v18.1.0 [7/10/24]”](#v1810-71024)updated package to reflect the version ^18.1.0 of @angular/core package,

$3

[Section titled “v18.1.3 [7/13/24]”](#v1813-71324)updated package to reflect the version ^18.1.0 of @angular/core package,

$3

[Section titled “v18.1.4 [7/13/24]”](#v1814-71324)updated package to reflect the version ^18.1.0 of @angular/core package

$3

[Section titled “v18.1.5 [7/13/24]”](#v1815-71324)[FIX] - fixed a bug with the default type not showing
,

$3

[Section titled “v18.1.6 [7/14/24]”](#v1816-71424)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v18.1.1000 [7/18/24]”](#v1811000-71824)updated package to reflect the version ^18.1.1 of @angular/core package,

$3

[Section titled “v18.1.2000 [7/24/24]”](#v1812000-72424)updated package to reflect the version ^18.1.2 of @angular/core package

$3

Section titled “v18.1.2300”[7/26/2024 4:05:00 PM EST]

[UPDATE] Updated wml-button-one.component.html, added conditional links for props.link and props.routerLink
[UPDATE] Updated wml-button-one.component.scss, added styles for links and removed unnecessary comments
[BREAKING CHANGE] Added encapsulation: ViewEncapsulation.None in wml-button-one.component.ts
[UPDATE] Added RouterModule to imports in wml-button-zero.module.ts
,

$3

[Section titled “v18.1.2300 [7/27/24]”](#v1812300-72724)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v18.1.2301 [7/30/24]”](#v1812301-73024)updated package to conform with @windmillcode/angular-wml-components-base
,

$3

[Section titled “v18.1.3000-beta0 [8/1/24]”](#v1813000-beta0-8124)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v18.1.3000-beta1 [8/1/24]”](#v1813000-beta1-8124)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v18.1.3000-beta2 [8/1/24]”](#v1813000-beta2-8124)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v18.1.3000-beta3 [8/1/24]”](#v1813000-beta3-8124)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v18.1.3000-beta4 [8/1/24]”](#v1813000-beta4-8124)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.1.3001 [8/4/24]”](#v1813001-8424)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.1.3002 [8/4/24]”](#v1813002-8424)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.1.3002 [8/5/24]”](#v1813002-8524)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.1.3003 [8/5/24]”](#v1813003-8524)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.1.3003 [8/5/24]”](#v1813003-8524-1)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.1.3004 [8/5/24]”](#v1813004-8524)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.1.3005 [8/5/24]”](#v1813005-8524)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.1.3006 [8/5/24]”](#v1813006-8524)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.1.3007 [8/5/24]”](#v1813007-8524)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.1.4000 [8/14/24]”](#v1814000-81424)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.1.4001 [8/14/24]”](#v1814001-81424)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.2.0 [8/15/24]”](#v1820-81524)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.2.1 [8/20/24]”](#v1821-82024)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.2.2 [8/20/24]”](#v1822-82024)[FIX] fixed a bug where the free module was not showing any text

$3

[Section titled “v18.2.3 [8/20/24]”](#v1823-82024)[UPDATE] made button default type button so unwanted side effects dont occur

$3

[Section titled “v18.2.1000 [8/22/24]”](#v1821000-82224)updated package to reflect the version 18.2.1 of @angular/core package

$3

[Section titled “v18.2.2000 [8/30/24]”](#v1822000-83024)updated package to reflect the version 18.2.2 of @angular/core package

$3

[Section titled “v18.2.2100 [9/1/24]”](#v1822100-9124)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.2.2101 [9/1/24]”](#v1822101-9124)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.2.2200 [9/3/24]”](#v1822200-9324)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.2.3000 [9/4/24]”](#v1823000-9424)updated package to reflect the version 18.2.3 of @angular/core package

$3

[Section titled “v18.2.3100 [9/8/24]”](#v1823100-9824)updated package to reflect the version 18.2.3 of @angular/core package

$3

[Section titled “v18.2.3110 [9/10/24]”](#v1823110-91024)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.2.3112 [9/10/24]”](#v1823112-91024)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.2.3200 [9/16/24]”](#v1823200-91624)updated package to conform with @windmillcode/wml-components-base

$3

[Section titled “v18.2.4000 [9/16/24]”](#v1824000-91624)updated package to reflect the version 18.2.4 of @angular/core package

$3

[Section titled “v18.2.4100 [9/19/24]”](#v1824100-91924)updated package to conform with @windmillcode/wml-components-base

$3

[Section titled “v18.2.4200 [9/21/24]”](#v1824200-92124)updated package to conform with @windmillcode/wml-components-base

$3

[Section titled “v18.2.5001 [9/22/24]”](#v1825001-92224)updated package to reflect the version 18.2.5 of @angular/core package

$3

[Section titled “v18.2.6000 [10/1/24]”](#v1826000-10124)updated package to reflect the version 18.2.6 of @angular/core package

$3

[Section titled “v18.2.7000 [10/2/24]”](#v1827000-10224)updated package to reflect the version 18.2.7 of @angular/core package

$3

[Section titled “v18.2.7001 [10/5/24]”](#v1827001-10524)updated package to conform with @windmillcode/wml-components-base

$3

[Section titled “v18.2.7010 [10/9/24]”](#v1827010-10924)updated package to conform with @windmillcode/wml-components-base

$3

[Section titled “v18.2.7020 [10/10/24]”](#v1827020-101024)updated package to conform with @windmillcode/wml-components-base

$3

[Section titled “v18.2.8000 [10/10/24]”](#v1828000-101024)updated package to reflect the version 18.2.8 of @angular/core package

$3

[Section titled “v18.2.8000 [10/11/24]”](#v1828000-101124)updated package to reflect the version 18.2.8 of @angular/core package

$3

[Section titled “v18.2.8001 [10/11/24]”](#v1828001-101124)updated package to conform with @windmillcode/wml-components-base

$3

[Section titled “v18.2.9000 [10/23/24]”](#v1829000-102324)updated package to conform with @windmillcode/wml-components-base

$3

[Section titled “v18.2.10000 [10/31/24]”](#v18210000-103124)updated package to conform with @windmillcode/wml-components-base

$3

[Section titled “v18.2.11000 [11/7/24]”](#v18211000-11724)updated package to conform with @windmillcode/wml-components-base

$3

[Section titled “v18.2.12000 [11/15/24]”](#v18212000-111524)updated package to conform with @windmillcode/wml-components-base

$3

[Section titled “v18.2.12001 [11/17/24]”](#v18212001-111724)updated package to conform with @windmillcode/wml-components-base

$3

[Section titled “v19.0.0 [11/19/24]”](#v1900-111924)updated package to conform with @windmillcode/wml-components-base

$3

[Section titled “v19.0.3 [11/20/24]”](#v1903-112024)updated package to conform with @windmillcode/wml-components-base

$3

[Section titled “v19.0.4 [11/26/24]”](#v1904-112624)updated package to conform with @windmillcode/wml-components-base

$3

[Section titled “v19.0.1000 [11/26/24]”](#v1901000-112624)updated package to conform with @windmillcode/wml-components-basePrevious
WML Angular Components Base Next
WML Carousel (3D)

WML Button

The library includes two primary components:

WMLButtonZeroComponent: A comprehensive component offering deep customization options.WMLButtonOneComponent: A simpler alternative for basic button needs with less complexity.

Installation

Section titled “Installation”Terminal window

npm install -s --verbose @windmillcode/angular-wml-button

WMLButtonOne

Section titled “WMLButtonOne”

$3

Section titled “Usage”

$3

Section titled “Getting Started”Button-One is suitable for most tasks

$3

Section titled “Change Button Text And Color”

$3

Section titled “Create Click Action”

$3

Section titled “Set Icon”Use the url to any icon of your choice

$3

Section titled “Change Button Types”

WMLButtonZero

Section titled “WMLButtonZero”Button-Zero is for advanced customization

$3

Section titled “Usage”

$3

Section titled “Getting Started”

$3

Section titled “Create Click Action”

$3

Section titled “Change Text”

$3

Section titled “Set Icon”Use the url to any icon of your choice

$3

Section titled “Change Button Types”

Reference

Section titled “Reference”

$3

Section titled “Properties”

$3

Section titled “WMLButtonZeroProps”

Property	Type	Description
`id`	`string`	Unique identifier for the button component.
`cdref`	`ChangeDetectorRef`	Optional. Angular’s `ChangeDetectorRef` associated with the component for triggering change detection manually.
`updateSubj`	`Subject<Partial<WMLButtonZeroProps>>`	Subject to emit updates for the component. Useful for reactive programming patterns.
`type`	`WMLButtonPropsTypeEnum`	The type of the button, determining its styling. Can be `PRIMARY`, `SECONDARY`, or `TERTIARY`. Uses a getter/setter to handle the internal state and update button classes dynamically.
`text`	`WMLUIProperty`	Property that configures the display text of the button, defaulting to “Click Me”.
`button`	`WMLUIProperty`	Property that configures the button behavior, including a click handler with a default alert action.
`icons`	`Array<WMLImage<any, WMLButtonIconType>>`	An array of icon objects representing the button’s icons. By default, this is set to a single font-awesome icon, with the icon type defaulting to `img`.
`attr`	`Object`	An object containing additional HTML attributes for the button, including:
`attr.type`	`“submit"`	"reset"

$3

Section titled “WMLButtonOneProps”

Property	Type	Description
`btnClass`	`string`	Gets or sets the button’s primary CSS class.
`btnStyle`	`Partial<CSSStyleDeclaration>`	Partial CSS styles for the button.
`btnIsPresent`	`boolean`	Indicates whether the button is present in the DOM.
`type`	`WMLButtonPropsTypeEnum`	The type of the button, influencing its styling. Can be `PRIMARY`, `SECONDARY`, or `TERTIARY`.
`iconType`	`WMLButtonIconType`	The type of icon used in the button.
`text`	`string`	The display text of the button. Default is `"Click Me"`.
`iconClass`	`string`	Gets or sets the icon’s CSS class.
`iconSrc`	`string`	Source URL of the icon.
`iconAlt`	`string`	Alt text for the icon, used for accessibility.
`iconIsPresent`	`boolean`	Indicates whether the icon is present.
`textIsPresent`	`boolean`	Indicates whether the text is present in the button.
`click`	`(evt?) => void`	Function that handles the button click event. Default action is an alert.
`updateSubj`	`Subject<Partial<WMLButtonOneProps>>`	Subject to emit updates for the component.
`link`	`string`	URL to which the button links, if it’s a link button.
`routerLink`	`string`	Angular router link to navigate when the button is clicked.
`attr`	`Object`	An object containing additional HTML attributes for the button, including:
`attr.type`	“submit"	"reset"

$3

Section titled “Methods”

$3

Changelog

export function HttpLoaderFactory(http: HttpClient) {

return new TranslateHttpLoader(http);

}

HttpClientModule,

WMLButtonZeroModule

.forChild(

new WMLModuleForRootProps({

ngxTranslateLoaderFactory:HttpLoaderFactory

})

),

to disable translation

WMLButtonZeroModule

$3

Section titled “v4.0.1”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

WMLButtonZeroNGXTranslateModule

// for regular

WMLButtonZeroModule

$3

Section titled “v4.0.5”added css id support, and made cdref available on the props

$3

Section titled “v4.0.7”add id support on the selector element itself

$3

Section titled “v16.2.70”for wmlbuttonzero, added additional wmluiproperty to button zero,

$3

Section titled “v16.2.80”updated package to reflect the version 16.2.80 of @angular/core package,

$3

Section titled “v16.2.90”updated package to reflect the version 16.2.90 of @angular/core package,

$3

Section titled “v16.2.91”updated package to reflect the version 16.2.91 of @angular/core package,

$3

Section titled “v16.2.93”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

$3

Section titled “v16.2.100”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

$3

Section titled “v16.2.110”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

$3

Section titled “v16.2.120”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

$3

Section titled “v17.0.10”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

$3

Section titled “v17.0.11”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

$3

Section titled “v17.0.20”updated package to reflect the version ^17.0.2 of @angular/core package,

$3

Section titled “v17.0.40”updated package to reflect the version ^17.0.4 of @angular/core package,

$3

Section titled “v17.0.50”updated package to reflect the version ^17.0.5 of @angular/core package,

$3

Section titled “v17.0.60”updated package to reflect the version ^17.0.6s of @angular/core package,

$3

Section titled “v17.0.70”updated package to reflect the version ^17.0.7 of @angular/core package,

$3

Section titled “v17.0.7100”updated package to conform with @windmillcode/angular-wml-components-base ,

$3

Section titled “v17.0.7200”updated package to conform with @windmillcode/angular-wml-components-base ,

$3

Section titled “v17.0.7300”updated package to conform with @windmillcode/angular-wml-components-base ,

$3

Section titled “v17.0.80”updated package to reflect the version ^17.0.8 of @angular/core package,

$3

Section titled “v17.0.8100”updated package to conform with @windmillcode/angular-wml-components-base ,

$3

Section titled “v17.0.8102”updated package to conform with @windmillcode/angular-wml-components-base

$3

Section titled “v17.0.8103”[FIX] ensured that change detection was working for buttons
,

$3

Section titled “v17.0.8103”updated package to conform with @windmillcode/angular-wml-components-base

$3

Section titled “v17.0.8104”[FIX] toggle margin between icon and text for wml-button-one when iconIsPresent is set to true
,

$3

Section titled “v17.0.9000”updated package to conform with @windmillcode/angular-wml-components-base ,

$3

Section titled “v17.0.9001”updated package to conform with @windmillcode/angular-wml-components-base

$3

Section titled “v17.0.9002”updated WMLButtonOneProps.click to have optional evt paramaeter
,

$3

Section titled “v17.1.0000”updated package to reflect the version ^17.1.0 of @angular/core package,

$3

Section titled “v17.1.2”updated package to conform with @windmillcode/angular-wml-components-base ,

$3

Section titled “v17.1.1000”updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v17.1.2000 [2/5/24]”](#v1712000-2524)updated package to reflect the version ^17.1.2 of @angular/core package,

$3

[Section titled “v17.1.2001 [2/8/24]”](#v1712001-2824)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v17.1.2002 [2/8/24]”](#v1712002-2824)corrected code so no text should wrap if the text overflows the button
,

$3

[Section titled “v17.1.3000 [2/8/24]”](#v1713000-2824)updated package to reflect the version ^17.1.3 of @angular/core package,

$3

[Section titled “v17.2.1000 [2/17/24]”](#v1721000-21724)updated package to reflect the version ^17.2.1 of @angular/core package

$3

[Section titled “v17.2.2000 [2/23/24]”](#v1722000-22324)updated package to reflect the version ^17.2.2 of @angular/core package,

$3

[Section titled “v17.2.2001 [2/23/24]”](#v1722001-22324)updated package to reflect the version ^17.2.2 of @angular/core package,

$3

[Section titled “v17.2.3000 [2/28/24]”](#v1723000-22824)updated package to reflect the version ^17.2.3 of @angular/core package,

$3

[Section titled “v17.2.3001 [3/2/24]”](#v1723001-3224)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v17.2.3002 [3/5/24]”](#v1723002-3524)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v17.2.4000 [3/8/24]”](#v1724000-3824)updated package to reflect the version ^17.2.4 of @angular/core package,

$3

[Section titled “v17.2.4001 [3/12/24]”](#v1724001-31224)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v17.2.4002 [3/12/24]”](#v1724002-31224)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v17.2.4003 [3/13/24]”](#v1724003-31324)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v17.2.4004 [3/13/24]”](#v1724004-31324)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v17.3.0 [3/17/24]”](#v1730-31724)updated package to reflect the version ^17.3.0 of @angular/core package
,

$3

[Section titled “v17.3.1000 [3/22/24]”](#v1731000-32224)updated package to reflect the version ^17.3.1 of @angular/core package,

$3

[Section titled “v17.3.2000 [3/28/24]”](#v1732000-32824)updated package to reflect the version ^17.3.2 of @angular/core package,

$3

[Section titled “v17.3.3000 [4/4/24]”](#v1733000-4424)updated package to reflect the version ^17.3.3 of @angular/core package,

$3

[Section titled “v17.3.4000 [4/11/24]”](#v1734000-41124)updated package to reflect the version ^17.3.4 of @angular/core package,

$3

[Section titled “v17.3.4001 [4/16/24]”](#v1734001-41624)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v17.3.5000 [4/20/24]”](#v1735000-42024)updated package to reflect the version ^17.3.5 of @angular/core package,

$3

[Section titled “v17.3.5110 [5/1/24]”](#v1735110-5124)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v17.3.6000 [5/1/24]”](#v1736000-5124)updated package to reflect the version ^17.3.6 of @angular/core package,

$3

[Section titled “v17.3.7000 [5/9/24]”](#v1737000-5924)updated package to reflect the version ^17.3.7 of @angular/core package,

$3

[Section titled “v17.3.8000 [5/9/24]”](#v1738000-5924)updated package to reflect the version ^17.3.8 of @angular/core package,

$3

[Section titled “v17.3.9000 [5/16/24]”](#v1739000-51624)updated package to reflect the version ^17.3.9 of @angular/core package,

$3

[Section titled “v18.0.0 [5/22/24]”](#v1800-52224)updated package to reflect the version ^18.0.0 of @angular/core package,

$3

[Section titled “v18.0.1 [5/22/24]”](#v1801-52224)updated package to reflect the version ^18.0.0 of @angular/core package,

$3

[Section titled “v18.0.4 [5/25/24]”](#v1804-52524)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v18.0.1000 [5/29/24]”](#v1801000-52924)updated package to reflect the version ^18.0.1 of @angular/core package,

$3

[Section titled “v18.0.2000 [6/6/24]”](#v1802000-6624)updated package to reflect the version ^18.0.2 of @angular/core package,

$3

[Section titled “v18.0.3000 [6/13/24]”](#v1803000-61324)updated package to reflect the version ^18.0.3 of @angular/core package,

$3

[Section titled “v18.0.3010 [6/18/24]”](#v1803010-61824)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v18.0.4000 [6/23/24]”](#v1804000-62324)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v18.0.5000 [6/26/24]”](#v1805000-62624)updated package to reflect the version ^18.0.5 of @angular/core package,

$3

[Section titled “v18.0.6000 [7/5/24]”](#v1806000-7524)updated package to reflect the version ^18.0.6 of @angular/core package,

$3

[Section titled “v18.1.0 [7/10/24]”](#v1810-71024)updated package to reflect the version ^18.1.0 of @angular/core package,

$3

[Section titled “v18.1.3 [7/13/24]”](#v1813-71324)updated package to reflect the version ^18.1.0 of @angular/core package,

$3

[Section titled “v18.1.4 [7/13/24]”](#v1814-71324)updated package to reflect the version ^18.1.0 of @angular/core package

$3

[Section titled “v18.1.5 [7/13/24]”](#v1815-71324)[FIX] - fixed a bug with the default type not showing
,

$3

[Section titled “v18.1.6 [7/14/24]”](#v1816-71424)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v18.1.1000 [7/18/24]”](#v1811000-71824)updated package to reflect the version ^18.1.1 of @angular/core package,

$3

[Section titled “v18.1.2000 [7/24/24]”](#v1812000-72424)updated package to reflect the version ^18.1.2 of @angular/core package

$3

Section titled “v18.1.2300”[7/26/2024 4:05:00 PM EST]

$3

[Section titled “v18.1.2300 [7/27/24]”](#v1812300-72724)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v18.1.2301 [7/30/24]”](#v1812301-73024)updated package to conform with @windmillcode/angular-wml-components-base
,

$3

[Section titled “v18.1.3000-beta0 [8/1/24]”](#v1813000-beta0-8124)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v18.1.3000-beta1 [8/1/24]”](#v1813000-beta1-8124)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v18.1.3000-beta2 [8/1/24]”](#v1813000-beta2-8124)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v18.1.3000-beta3 [8/1/24]”](#v1813000-beta3-8124)updated package to conform with @windmillcode/angular-wml-components-base ,

$3

[Section titled “v18.1.3000-beta4 [8/1/24]”](#v1813000-beta4-8124)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.1.3001 [8/4/24]”](#v1813001-8424)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.1.3002 [8/4/24]”](#v1813002-8424)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.1.3002 [8/5/24]”](#v1813002-8524)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.1.3003 [8/5/24]”](#v1813003-8524)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.1.3003 [8/5/24]”](#v1813003-8524-1)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.1.3004 [8/5/24]”](#v1813004-8524)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.1.3005 [8/5/24]”](#v1813005-8524)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.1.3006 [8/5/24]”](#v1813006-8524)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.1.3007 [8/5/24]”](#v1813007-8524)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.1.4000 [8/14/24]”](#v1814000-81424)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.1.4001 [8/14/24]”](#v1814001-81424)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.2.0 [8/15/24]”](#v1820-81524)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.2.1 [8/20/24]”](#v1821-82024)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.2.2 [8/20/24]”](#v1822-82024)[FIX] fixed a bug where the free module was not showing any text

$3

[Section titled “v18.2.3 [8/20/24]”](#v1823-82024)[UPDATE] made button default type button so unwanted side effects dont occur

$3

[Section titled “v18.2.1000 [8/22/24]”](#v1821000-82224)updated package to reflect the version 18.2.1 of @angular/core package

$3

[Section titled “v18.2.2000 [8/30/24]”](#v1822000-83024)updated package to reflect the version 18.2.2 of @angular/core package

$3

[Section titled “v18.2.2100 [9/1/24]”](#v1822100-9124)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.2.2101 [9/1/24]”](#v1822101-9124)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.2.2200 [9/3/24]”](#v1822200-9324)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.2.3000 [9/4/24]”](#v1823000-9424)updated package to reflect the version 18.2.3 of @angular/core package

$3

[Section titled “v18.2.3100 [9/8/24]”](#v1823100-9824)updated package to reflect the version 18.2.3 of @angular/core package

$3

[Section titled “v18.2.3110 [9/10/24]”](#v1823110-91024)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.2.3112 [9/10/24]”](#v1823112-91024)updated package to conform with @windmillcode/angular-wml-components-base

$3

[Section titled “v18.2.3200 [9/16/24]”](#v1823200-91624)updated package to conform with @windmillcode/wml-components-base

$3

[Section titled “v18.2.4000 [9/16/24]”](#v1824000-91624)updated package to reflect the version 18.2.4 of @angular/core package

$3

[Section titled “v18.2.4100 [9/19/24]”](#v1824100-91924)updated package to conform with @windmillcode/wml-components-base

$3

[Section titled “v18.2.4200 [9/21/24]”](#v1824200-92124)updated package to conform with @windmillcode/wml-components-base

$3

[Section titled “v18.2.5001 [9/22/24]”](#v1825001-92224)updated package to reflect the version 18.2.5 of @angular/core package

$3

[Section titled “v18.2.6000 [10/1/24]”](#v1826000-10124)updated package to reflect the version 18.2.6 of @angular/core package

$3

[Section titled “v18.2.7000 [10/2/24]”](#v1827000-10224)updated package to reflect the version 18.2.7 of @angular/core package

$3

[Section titled “v18.2.7001 [10/5/24]”](#v1827001-10524)updated package to conform with @windmillcode/wml-components-base

$3

[Section titled “v18.2.7010 [10/9/24]”](#v1827010-10924)updated package to conform with @windmillcode/wml-components-base

$3

[Section titled “v18.2.7020 [10/10/24]”](#v1827020-101024)updated package to conform with @windmillcode/wml-components-base

$3

[Section titled “v18.2.8000 [10/10/24]”](#v1828000-101024)updated package to reflect the version 18.2.8 of @angular/core package

$3

[Section titled “v18.2.8000 [10/11/24]”](#v1828000-101124)updated package to reflect the version 18.2.8 of @angular/core package

$3

[Section titled “v18.2.8001 [10/11/24]”](#v1828001-101124)updated package to conform with @windmillcode/wml-components-base

$3

[Section titled “v18.2.9000 [10/23/24]”](#v1829000-102324)updated package to conform with @windmillcode/wml-components-base

$3

[Section titled “v18.2.10000 [10/31/24]”](#v18210000-103124)updated package to conform with @windmillcode/wml-components-base

$3

[Section titled “v18.2.11000 [11/7/24]”](#v18211000-11724)updated package to conform with @windmillcode/wml-components-base

$3

[Section titled “v18.2.12000 [11/15/24]”](#v18212000-111524)updated package to conform with @windmillcode/wml-components-base

$3

[Section titled “v18.2.12001 [11/17/24]”](#v18212001-111724)updated package to conform with @windmillcode/wml-components-base

$3

[Section titled “v19.0.0 [11/19/24]”](#v1900-111924)updated package to conform with @windmillcode/wml-components-base

$3

[Section titled “v19.0.3 [11/20/24]”](#v1903-112024)updated package to conform with @windmillcode/wml-components-base

$3

[Section titled “v19.0.4 [11/26/24]”](#v1904-112624)updated package to conform with @windmillcode/wml-components-base

$3

[Section titled “v19.0.1000 [11/26/24]”](#v1901000-112624)updated package to conform with @windmillcode/wml-components-basePrevious
WML Angular Components Base Next
WML Carousel (3D)