CtrlK

Cancel

20.1.6000 20.1.5000 20.1.4000 20.1.3000 20.1.2000 20.1.1000 20.1.0 20.0.6000 20.0.5000 20.0.4000 20.0.3000 20.0.2000 20.0.1000 20.0.0 19.2.14000 19.2.13000 19.2.12000 19.2.11000 19.2.10000 19.2.10000 19.2.9000 19.2.8000 19.2.7000 19.2.6000 19.2.5100 19.2.5001 19.2.5000 19.2.4000 19.2.3000 19.2.2000 19.2.1000 19.2.0 19.1.8000 19.1.7000 19.1.6000 19.1.5000 19.1.4000 19.1.3000 19.1.2000 19.1.1000 19.1.0 19.0.7000 19.0.6000 19.0.5000 19.0.4000 19.0.3000 19.0.2000 19.0.1000 19.0.0 18.2.12000 18.2.11000 18.2.10000 18.2.9000 18.2.8000 18.2.7000 18.2.6000 18.2.5000 18.2.4200 18.2.4100 18.2.4000 18.2.3200 18.2.3100 DarkLightAuto

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:

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

Property	Type	Description
`limit`	`number`	The maximum number of chips allowed. Default is `Infinity`.
`wmlField`	`WMLFieldZeroProps`	The field properties for the WML Chips component.
`formArray`	`FormArray`	The form array to store the chip values.
`updateFormArrayPredicate`	`(val: string) => any`	Function to transform chip value before adding to form array.
`placeholder`	`string`	Placeholder text for the input.
`userInputsAriaLabel`	`string`	ARIA label for user inputs.
`removeChipAriaLabel`	`string`	ARIA label for the remove chip button.
`userInputs`	`Array<string>`	The list of user inputs (chips).
`clearBtn`	`WMLButtonOneProps`	Properties 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

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

v3.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 packages 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

v18.2.4100 [9/19/24]

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

v18.2.4200 [9/21/24]

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

v18.2.5001 [9/22/24]

updated package to reflect the version 18.2.5 of @angular/core package

v18.2.6000 [10/1/24]

updated package to reflect the version 18.2.6 of @angular/core package

v18.2.7000 [10/2/24]

updated package to reflect the version 18.2.7 of @angular/core package

v18.2.7001 [10/5/24]

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

v18.2.7010 [10/9/24]

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

v18.2.7020 [10/10/24]

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

v18.2.8000 [10/10/24]

updated package to reflect the version 18.2.8 of @angular/core package

v18.2.8000 [10/11/24]

updated package to reflect the version 18.2.8 of @angular/core package

v18.2.8001 [10/11/24]

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

v18.2.9000 [10/23/24]

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

v18.2.10000 [10/31/24]

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

v18.2.11000 [11/7/24]

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

v18.2.12000 [11/15/24]

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

v18.2.12001 [11/17/24]

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

v19.0.0 [11/19/24]

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

v19.0.3 [11/20/24]

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

v19.0.4 [11/26/24]

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

v19.0.1000 [11/26/24]

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

v19.0.2000 [12/4/24]

updated package to reflect the version 19.0.2 of @angular/core package

v19.0.3000 [12/6/24]

updated package to reflect the version 19.0.3 of @angular/core package

v19.0.4000 [12/12/24]

updated package to reflect the version 19.0.4 of @angular/core package

v19.0.5000 [12/19/24]

updated package to reflect the version 19.0.5 of @angular/core package

v19.0.5002 [12/29/24]

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

v19.0.5100 [12/29/24]

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

v19.0.6000 [1/12/25]

updated package to reflect the version 19.0.6 of @angular/core package

v19.0.7000 [1/16/25]

updated package to reflect the version 19.0.7 of @angular/core package

v19.1.0 [1/17/25]

updated package to reflect the version 19.1.0 of @angular/core package

v19.1.1000 [1/17/25]

updated package to reflect the version 19.1.1 of @angular/core package

v19.1.2000 [1/23/25]

updated package to reflect the version 19.1.2 of @angular/core package

v19.1.3000 [1/23/25]

updated package to reflect the version 19.1.3 of @angular/core package

v19.1.3100 [1/23/25]

update package to support the react native ecosystem

v19.1.3111 [1/27/25]

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

v19.1.3112 [1/28/25]

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

v19.1.4000 [1/31/25]

updated package to reflect the version 19.1.4 of @angular/core package

v19.1.5000 [2/8/25]

updated package to reflect the version 19.1.5 of @angular/core package

v19.1.6000 [2/13/25]

updated package to reflect the version 19.1.6 of @angular/core package

v19.1.7000 [2/21/25]

updated package to reflect the version 19.1.7 of @angular/core package

v19.1.8000 [3/4/25]

updated package to reflect the version 19.1.8 of @angular/core package

v19.2.0 [3/4/25]

updated package to reflect the version 19.2.0 of @angular/core package

v19.2.1000 [3/9/25]

updated package to reflect the version 19.2.1 of @angular/core package

v19.2.2000 [3/15/25]

updated package to reflect the version 19.2.2 of @angular/core package

v19.2.3000 [3/21/25]

updated package to reflect the version 19.2.3 of @angular/core package

v19.2.4000 [3/27/25]

updated package to reflect the version 19.2.4 of @angular/core package

v19.2.5000 [4/3/25]

updated package to reflect the version 19.2.5 of @angular/core package

v19.2.5001 [4/6/25]

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

v19.2.5100 [4/10/25]

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

v19.2.6000 [4/10/25]

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

v19.2.7000 [4/21/25]

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

v19.2.8000 [4/24/25]

updated package to reflect the version 19.2.8 of @angular/core package

v19.2.9000 [5/1/25]

updated package to reflect the version 19.2.9 of @angular/core package

v19.2.10000 [5/8/25]

updated package to reflect the version 19.2.10 of @angular/core package

v19.2.11000 [5/15/25]

updated package to reflect the version 19.2.11 of @angular/core package

v19.2.12000 [5/22/25]

updated package to reflect the version 19.2.12 of @angular/core package

v19.2.13000 [5/24/25]

updated package to reflect the version 19.2.13 of @angular/core package

v19.2.14000 [5/28/25]

updated package to reflect the version 19.2.14 of @angular/core package

v19.2.14001 [6/11/25]

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

v20.0.0 [6/29/25]

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

v20.0.1000 [6/30/25]

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

v20.0.2000 [6/30/25]

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

v20.0.3000 [7/2/25]

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

v20.0.4000 [7/2/25]

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

v20.0.5000 [7/2/25]

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

v20.0.6000 [7/27/25]

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

v20.1.0 [7/27/25]

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

v20.1.1000 [7/27/25]

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

v20.1.2000 [7/28/25]

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

v20.1.3000 [7/28/25]

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

v20.1.4000 [8/1/25]

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

v20.1.5000 [8/9/25]

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

v20.1.6000 [8/14/25]

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

Previous
WML Carousel (3D) Next
WML Field

On this page

View Modes

WML Chips

Installation

Usage

WMLChipsZeroComponent

Getting Started

Custom Placeholder

Limit Chips

Custom Form Array

Custom Button

CSS Customization

CSS Variables

Reference

WMLChipsZeroProps

Changelog

v1.0.0

v1.0.1 -> v1.0.2

v2.0.0

v3.0.0

v16.2.80

v16.2.80

v16.2.90

v16.2.91

v16.2.93

v16.2.100

v16.2.110

v16.2.120

v17.0.10

v17.0.11

v17.0.20

v17.0.40

v17.0.50

v17.0.60

v17.0.70

v17.0.7100

v17.0.7200

v17.0.7300

v17.0.80

v17.0.8100

v17.0.8102

v17.0.8103

v17.0.9000

v17.0.9001

v17.1.0000

v17.1.2

v17.1.1000

v17.1.2000 [2/5/24]

v17.1.2001 [2/8/24]

v17.1.3000 [2/8/24]

v17.2.1000 [2/17/24]

v17.2.2000 [2/23/24]

v17.2.2001 [2/23/24]

v17.2.3000 [2/28/24]

v17.2.3001 [3/2/24]

v17.2.3002 [3/5/24]

v17.2.4000 [3/8/24]

v17.2.4001 [3/12/24]

v17.2.4002 [3/12/24]

v17.2.4003 [3/13/24]

v17.2.4004 [3/13/24]

v17.3.0 [3/17/24]

v17.3.1000 [3/22/24]

v17.3.2000 [3/28/24]

v17.3.3000 [4/4/24]

v17.3.4000 [4/11/24]

v17.3.4001 [4/16/24]

v17.3.5000 [4/20/24]

v17.3.5100 [4/23/24]

v17.3.5110 [4/27/24]

v17.3.5110 [5/1/24]

v17.3.6000 [5/1/24]

v17.3.7000 [5/9/24]

v17.3.8000 [5/9/24]

v17.3.9000 [5/16/24]

v18.0.0 [5/22/24]

v18.0.1 [5/22/24]

v18.0.4 [5/25/24]

v18.0.1000 [5/29/24]

v18.0.2000 [6/6/24]