Skip to content
Windmillcode Angular CDK

WML Chips

The Angular WML Chips library provides a highly customizable chips component for Angular applications. It offers a variety of features to enhance user interaction and improve the overall user experience.

Installation

To install the Angular WML Chips Zero library, use the following command:

Terminal window
npm install --verbose @windmillcode/angular-wml-chips

Usage

WMLChipsZeroComponent

Getting Started

Custom Placeholder

Limit Chips

Custom Form Array

Custom Button

CSS Customization

The WML Chips Zero component comes with several CSS variables and SCSS mixins that allow you to customize its appearance to fit your design needs.

CSS Variables

The following CSS variables can be customized:

:root {
  --wml-chips-white: 255,255,255;
  --wml-chips-black: 0,0,0;
  --wml-chips-primary: 144,238,144;
  --wml-chips-secondary: 112,112,112;
  --wml-chips-primary-gradient: radial-gradient(farthest-corner at 100% 0px, rgb(144,238,144) 0%, rgb(112,112,112) 150%);
  --wml-chips-secondary-gradient: radial-gradient(farthest-corner at 100% 0px, grey 0%, rgb(0,0,0) 150%);
}

Reference

WMLChipsZeroProps

PropertyTypeDescription
limitnumberThe maximum number of chips allowed. Default is Infinity.
wmlFieldWMLFieldZeroPropsThe field properties for the WML Chips component.
formArrayFormArrayThe form array to store the chip values.
updateFormArrayPredicate(val: string) => anyFunction to transform chip value before adding to form array.
placeholderstringPlaceholder text for the input.
userInputsAriaLabelstringARIA label for user inputs.
removeChipAriaLabelstringARIA label for the remove chip button.
userInputsArray<string>The list of user inputs (chips).
clearBtnWMLButtonOnePropsProperties for the clear button.

Changelog

v1.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,
    WMLChipsZeroModule
    .forChild(
      new WMLModuleForRootProps({
        ngxTranslateLoaderFactory:HttpLoaderFactory
      })
    ),
  • to disable translation
    WMLChipsZeroModule

v1.0.1 -> v1.0.2

  • atteptimg to fix dependencies

2.0.0

  • 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
WMLChipsZeroNGXTranslateModule
// for regular
WmlChipsModule

3.0.0

  • MAJOR : reanme to angular-wml-chips-zero %!(EXTRA string=

v16.2.80

  • updated package to reflect the version 16.2.80 of @angular/core package),

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

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

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

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.5100 [4/23/24]

  • [BREAKING CHANGE] - removed mat-autocomplete from chip control

v17.3.5110 [4/27/24]

  • [UPDATE] added wmlField so now formArray does not need to be specified and comes from wml-form [UPDATE] Updated chip styling in wml-chips-zero component for a more modern look and feel.

[PATCH] Removed dependency on @angular/material in wml-chips-zero, reducing the package’s dependency footprint [UPDATE] Introduced @windmillcode/angular-wml-button-zero in dependencies to enhance button functionalities in wml-chips-zero. ,

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