Skip to content
Windmillcode Angular CDK

WML Button

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

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

WMLButtonOne

Usage

Getting Started

Button-One is suitable for most tasks

Change Button Text And Color

Create Click Action

Set Icon

Use the url to any icon of your choice

Change Button Types

WMLButtonZero

Button-Zero is for advanced customization

Usage

Getting Started

Create Click Action

Change Text

Set Icon

Use the url to any icon of your choice

Change Button Types

Reference

Properties

WMLButtonZeroProps

PropertyTypeDescription
idstringUnique identifier for the button component.
cdrefChangeDetectorRefOptional. Angular’s ChangeDetectorRef associated with the component for triggering change detection manually.
updateSubjSubject<Partial<WMLButtonZeroProps>>Subject to emit updates for the component. Useful for reactive programming patterns.
typeWMLButtonPropsTypeEnumThe 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.
textWMLUIPropertyProperty that configures the display text of the button, defaulting to “Click Me”.
buttonWMLUIPropertyProperty that configures the button behavior, including a click handler with a default alert action.
iconsArray<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.
attrObjectAn object containing additional HTML attributes for the button, including:
attr.type`“submit""reset"

WMLButtonOneProps

PropertyTypeDescription
btnClassstringGets or sets the button’s primary CSS class.
btnStylePartial<CSSStyleDeclaration>Partial CSS styles for the button.
btnIsPresentbooleanIndicates whether the button is present in the DOM.
typeWMLButtonPropsTypeEnumThe type of the button, influencing its styling. Can be PRIMARY, SECONDARY, or TERTIARY.
iconTypeWMLButtonIconTypeThe type of icon used in the button.
textstringThe display text of the button. Default is "Click Me".
iconClassstringGets or sets the icon’s CSS class.
iconSrcstringSource URL of the icon.
iconAltstringAlt text for the icon, used for accessibility.
iconIsPresentbooleanIndicates whether the icon is present.
textIsPresentbooleanIndicates whether the text is present in the button.
click(evt?) => voidFunction that handles the button click event. Default action is an alert.
updateSubjSubject<Partial<WMLButtonOneProps>>Subject to emit updates for the component.
linkstringURL to which the button links, if it’s a link button.
routerLinkstringAngular router link to navigate when the button is clicked.
attrObjectAn object containing additional HTML attributes for the button, including:
attr.type`“submit""reset"

Methods

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).

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

  • v0.0.1 button is ready to be used
  • v0.0.2 include cursor pointer for the button view
  • v0.0.3 gave hover functionality to the button
  • 1.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 text
  • 2.0.0 BREAKING CHANGE WMLButtonZeroPropsTypeEnum renamed to WMLButtonPropsTypeEnum created wml-button-one component which leverages wmlButton for easier button creation
  • 2.1.0
    • full support for wml-button-one
  • 2.1.1
    • add WMLButtonOneProps.btnIsPresent to show and hide buttons
  • 3.0.0
    • ensured that there is support for ngx-translate and non ngx-translate features
    • to enable translation
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}


    HttpClientModule,
    WMLButtonZeroModule
    .forChild(
      new WMLModuleForRootProps({
        ngxTranslateLoaderFactory:HttpLoaderFactory
      })
    ),
  • to disable translation
    WMLButtonZeroModule

4.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

4.0.5

  • added css id support, and made cdref available on the props

4.0.7

  • add id support on the selector element itself

16.2.70

  • for wmlbuttonzero, added additional wmluiproperty to button zero

,

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.6s 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

  • [FIX] ensured that change detection was working for buttons ,

v17.0.8103

  • updated package to conform with @windmillcode/angular-wml-components-base

v17.0.8104

  • [FIX] toggle margin between icon and text for wml-button-one when iconIsPresent is set to true ,

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.0.9002

  • updated WMLButtonOneProps.click to have optional evt paramaeter ,

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.2002 [2/8/24]

  • corrected code so no text should wrap if the text overflows the button ,

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

17.2.1001 [2/21/24]

  • [UPDATE] added WMLButtonZeroProps.listenForUpdate amd WMLButtonOneProps.listenForUpdate so changes that dont reflect by assignment would reflect this way

v17.2.2000 [2/23/24]

  • updated package to reflect the version ^17.2.2 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.0 [5/22/24]

  • updated package to reflect the version ^18.0.0 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.0 [7/10/24]

  • updated package to reflect the version ^18.1.0 of @angular/core package,

v18.1.3 [7/13/24]

  • updated package to reflect the version ^18.1.0 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.5 [7/13/24]

  • [FIX] - fixed a bug with the default type not showing ,

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/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 ,

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-beta0 [8/1/24]

  • updated package to conform with @windmillcode/angular-wml-components-base ,

v18.1.3000-beta1 [8/1/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]

  • updated package to conform with @windmillcode/angular-wml-components-base

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.3002 [8/5/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.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.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.2 [8/20/24]

  • [FIX] fixed a bug where the free module was not showing any text

v18.2.3 [8/20/24]

  • [UPDATE] made button default type button so unwanted side effects dont occur

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