Color Selection

This Angular Module (Component) that adds the UI for Color Selection.

Installation

npm install color-selection

Scaffolding

Import the module into your project under imports

imports: [
    BrowserModule,
    AppRoutingModule,
    ColorSelectionModule
  ],

or

imports: [
    BrowserModule,
    AppRoutingModule,
    ColorSelectionModule.forRoot({
      colors: [
        { name: 'blue0', hex: '#FFAA00'},
        { name: 'blue1', hex: '#FFAA11'},
        { name: 'blue2', hex: '#FFAA22'},
        { name: 'blue3', hex: '#FFAA33'},
        { name: 'blue4', hex: '#FFAA44'}
      ]
    }),
  ],

Use

To use in your component, use the following tag

<wav-color-selection></wav-color-selection>

Inputs

colors: Encrypt the input using the token ARRAY OF COLORS (Object)

colorName: Allows the user to view the encrypted string BOOLEAN

Array of color values

colors = [ { name: 'blue0', hex: '#FFAA00'}, { name: 'blue1', hex: '#FFAA11'}, { name: 'blue2', hex: '#FFAA22'}, { name: 'blue3', hex: '#FFAA33'}, { name: 'blue4', hex: '#FFAA44'} ]

Color Model

Create an Array of your colors using the Color Model

{ name: "blue2", hex: "#FFAA44" }

Sample Configurations

<wav-color-selection
  [colors]="colors"
  [colorName]="true"
  formControlName="color"
></wav-color-selection>

Here is the same component inside a formGroup

<div [formGroup]="colorsForm" style="padding: 24px;">
  <wav-color-selection
    [colors]="colors"
    [colorName]="true"
    formControlName="color"
  ></wav-color-selection>
</div>

Input return

You will note that the control will return an string of the color value If colorName input is set to TRUE, then you will get the Name of the color otherwise you will get the Hex value

Below is a sample of the implementation

colorsForm = this.fb.group({
  color: ['Black']
})

colors = [
  { name: 'Black', hex: '#000000'},
  { name: 'Fresh Lilac', hex: '#8D5A97'},
  { name: 'Mountainbatten Pink', hex: '#907F9F'},
  { name: 'WhiSilver Metalic', hex: '#A4A5AE'},
  { name: 'Opal', hex: '#B0C7BD'},
  { name: 'Magic Mint', hex: '#B8EBD0'},
]

ngOnInit() {

  this.colorsForm.get('color')?.valueChanges.subscribe(data => {
    console.log('value:', data)
  })

}