Getting Started

28 Nov 20171 minute to read

This section explains briefly about how to create a ColorPicker in your application with EmberJS

Before we start with the ColorPicker, please refer this page for general information regarding integrating Syncfusion widget’s.

Adding JavaScript and CSS Reference

To render the ColorPicker control, the following list of dependencies are required.

CSS file

Script Files

File  Description / Usage

Includes only the widget basic functions and Framework features. Must be referred always before using all the JS controls


ColorPicker plugin.


Button Plugin


SplitButton Plugin

Menu Plugin


Slider Plugin

You can make use of ‘ej.web.all.min.js’ file which encapsulates all ‘ej’ web components and frameworks in single file.

Initialize ColorPicker

  • Open the command prompt in the folder ember-app or the folder in which the application is created.

  • Use the command ember generate route colorpicker/default to create template file default.hbs in templates folder and router file default.js in routes folder. It also add the routing content in router.js.

  • Use below code in default.hbs in templates folder to render the ColorPicker control.

  • HTML
  • { % raw % }
      { % endraw % }
    • Use the below code in default.js in routes folder to bind the model to the ColorPicker Control.
  • export default Ember.Route.extend({
          model() {
             return {

    Running the application

    • To run the application, execute below command.
  • ember serve

    Browse to http://localhost:4200 to see the application and navigate to ColorPicker sample. The component is rendered as like the below screenshot.