Ngx-checkboxpills NPM

Install from NPM

npm install ngx-checkboxpills --save

Example Usage

1. Import it in the Module

Import the CheckboxPillModule in the AppModule or the Module in which you want to have this control.

import { CheckboxPillModule } from 'ngx-checkboxpills';

2. Define the array to display in the Component

Define the input array in the component.ts file

export class SuperHeroComponent {
    superHeroList: any;  //input array
    ntgUniverse = {
      superHeros: [],  // selected output array
      galaxies: [],
      planets: []
    }
    
    constructor() {

        this.superHeroList = [
        {
          '_id': 1002,
          'heroName': 'Batman'
        },
        {
          '_id': 1003,
          'heroName': 'The Flash'
        },
        
        .....
        
        {
          '_id': 1008,
          'heroName': 'Iron Man'
        }];

    }
    
    //output Listener event
    selectedSuperHeros(superHeroArray) {
        console.log("superHeroArray ", superHeroArray);
        //do whatever you want to alter the output
    }
}

3. Use it in the Template

Use the app-checkbox-pill in the Template or TemplateUrl in the component.

<app-checkbox-pill
      (pillsSelectedChange)="selectedSuperHeros($event)" 
      [pillIdVariable]="'_id'" [pillTextVariable]="'heroName'" 
      [inputArray]="superHeroList" [(pillsSelected)]="ntgUniverse.superHeros" 
      [activePillBGColor]="'#712626'" [activePillFontColor]="'#fff'">
</app-checkbox-pill>

Example

ScreenShot1

Parameters

Param	Type	Required	Description
inputArray	Array of Objects	Yes	This should be an array of objects, which is used to display the data in the pills. The objects in the array should contain an unique id and text to display.
pillIdVariable	String	Yes	This will be the variable name you are using for the unique id.
pillTextVariable	String	Yes	This will be the variable name you are using for the display text.
pillsSelected	Array of Objects	Yes	This will be the output variable used to store the selected pills objects
activePillBGColor	String	No	This variable is used for theming, should be a string of hex color value. default color value is #712626
activePillFontColor	String	No	This variable is used for theming(font color when the pill is selected), should be a string of hex color value. default color value is #fff
pillsSelectedChange	function	Yes	This function is used as an output listener.