title: Angular2 ionic 2 Color picker
body: <p>i want to use a color picker in ionic 2 . I using angular2-color-picker From <a href="https://github.com/Alberplz/angular2-color-picker#options" rel="nofollow">here</a>. as per the doc folder added pages/color-picker. please help me some thing missing or what can i do? </p>
  
  <p>its Get error </p>
  
  <blockquote>
    <p>No provider for ColorPickerService!</p>
  </blockquote>
  
  <p>My.html</p>
  
  <pre><code>&lt;ion-input [(colorPicker)]="color" [style.background]="color" [value]="color"&gt;&lt;/ion-input&gt;
  </code></pre>
  
  <p>my.ts</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {ColorPickerDirective} from '../color-picker/color-picker.directive'
  @Component({
    templateUrl: 'build/pages/trans-generation/trans-generation.html',
    directives: [ColorPickerDirective]
  })
  export class TransGeneration {
    private color: string = "#127bdc";
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>app.ts</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {TransGeneration} from './pages/trans-generation/trans-generation';
  import {ColorPickerService} from './pages/color-picker/color-picker.service'
  
  ionicBootstrap(MyApp,TransGeneration, [ColorPickerService])</code></pre>
  </div>
  </div>
  </p>