This section explains how to create a default ColorPicker and demonstrate the basic usage of the ColorPicker module.
The list of dependencies required to use the ColorPicker module in your application is given below:
|-- @syncfusion/ej2-angular-inputs
|-- @syncfusion/ej2-angular-base
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-inputs
|-- @syncfusion/ej2-buttons
|-- @syncfusion/ej2-popups
|-- @syncfusion/ej2-splitbuttons
You can use Angular CLI to setup your Angular applications. To install Angular CLI use the following command.
npm install -g @angular/cli
Start a new Angular application using below Angular CLI command.
ng new my-app
cd my-app
To install ColorPicker package, use the following command.
npm install @syncfusion/ej2-angular-inputs --save
Import ColorPicker module into Angular application(app.module.ts) from the package
@syncfusion/ej2-angular-inputs
.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// Importing Colorpicker module from Syncfusion ej2-angular-inputs package.
import { ColorPickerModule } from '@syncfusion/ej2-angular-inputs';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule, ColorPickerModule ], // Declaration of ColorPickerModule into NgModule.
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Modify the template in app.component.ts
file to render the ColorPicker component.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<!-- To render ColorPicker. -->
<input ejs-colorpicker type="color" id="colorpicker" />`
})
export class AppComponent { }
Add ColorPicker component’s styles as given below in style.css
.
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
Run the application in the browser using the following command:
ng serve
The following example shows a default ColorPicker component.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<h4>Choose Color</h4>
<!-- To render ColorPicker. -->
<input ejs-colorpicker type="color" id="colorpicker" />`
})
export class AppComponent { }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { ColorPickerComponent } from '@syncfusion/ej2-angular-inputs';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,FormsModule
],
declarations: [AppComponent, ColorPickerComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
By default, the ColorPicker will be rendered using SplitButton and open the pop-up to access the ColorPicker. To
render the ColorPicker container alone and to access it directly, render it as inline. It can be achieved by setting the inline
property to true
.
The following sample shows the inline type rendering of ColorPicker.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<h4>Choose Color</h4>
<!-- To render inline ColorPicker. -->
<input ejs-colorpicker type="color" id="colorpicker" [inline]="true" [showButtons]="false" />`
})
export class AppComponent { }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { ColorPickerComponent } from '@syncfusion/ej2-angular-inputs';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,FormsModule
],
declarations: [AppComponent, ColorPickerComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
The
showButtons
property is disabled in this sample because the control buttons are not needed for inline type. To know about the control buttons functionality, refer to theshowButtons
sample.