Web Components Color Editor Overview (preview)

    The Ignite UI for Web Components Color Editor is a lightweight color picker component. The Color Editor can pop open by clicking the brush icon. Both the rgba and hex values can be obtained from the desired color along the bottom. These values will update when the three sliders are modified. The center box is designed for adjusting the saturation and brightness along with two adjacent sliders for adjusting the rgb and luminance values. Rgb registers between (1-255). The lightness registers between(0-1).

    Web Components Color Editor Example

    Dependencies

    First, you need to install the Ignite UI for Web Components by running the following command:

    npm install igniteui-webcomponents-core
    npm install igniteui-webcomponents-inputs
    

    Before using the ColorEditor, you need to register the following modules as follows:

    import { IgcColorEditorModule } from "igniteui-angular-inputs";
    
    @NgModule({
        imports: [
            IgcColorEditorModule
        ]
    })
    export class AppModule {}
    
    import { IgcColorEditorModule, IgcColorEditorComponent } from 'igniteui-webcomponents-inputs';
    
    ModuleManager.register(
        IgcColorEditorModule
    );
    

    Usage

    The simplest way to start using the ColorEditor is as follows:

    <igc-color-editor
        name="colorEditor"
        id="colorEditor">
    </igc-color-editor>
    

    Binding to events

    The Color Editor component raises the following events:

    • valueChanged
    • valueChanging
    this.OnValueChanged = this.OnValueChanged.bind(this);
    this.colorEditor = document.getElementById('colorEditor') as IgcColorEditorComponent;
    this.colorEditor.valueChanged = this.OnValueChanged;
    

    API References

    • ColorEditor

    Additional Resources