Simple Color Picker

Simple Color Picker

simple color picker

$3.00

Roman Kolesnikov

Roman Kolesnikov

Member since 2017

Details

Version:
1.0
Ionic:
3.x  
Platforms:
iOS, Android  
Released:
3 years ago
Updated:
3 years ago
Category:
Plugins
Tags:
color, color-picker, picker, ionic-color-picker, ionic2-color-picker, ionic3-color-picker, ionic 2, ionic 3,

A Simple Color Picker component to change a color icon and save state selected color in storage

INSTALL

Put the folder color-picker you'll find in the zip package in your app src directory, inside the components/pages directory (create the directory if not already there).

Put the file change-color.directive.ts you'll find in the zip package in your app src directory, inside the app directory Add the component in your app.module.ts, like this:

```

import { ColorPage } from "../pages/color-picker/color-picker";

```

Install ionic storage - npm install --save @ionic/storageNext, add it to the imports list in your NgModule declaration (more about storage ):

```

@NgModule({ declarations: [ MyApp, StartIonicPage, ContactsPage, ColorPage, ChangeColorDirective ], imports: [ BrowserModule, IonicModule.forRoot(MyApp), IonicStorageModule.forRoot() ], bootstrap: [IonicApp], entryComponents: [ MyApp, StartIonicPage, ContactsPage, ColorPage ], providers: [ StatusBar, SplashScreen, ColorPickerData, {provide: ErrorHandler, useClass: IonicErrorHandler} ] ```

Use the component like this in your html template:

```

< ion-buttons end> < button [changeColor] ion-button icon-only (click)="presentPopover($event)" > < /button> < /ion-buttons>

```

Use the component like this in your TypeScript template:

```

import {ColorPage} from "../color-picker/color-picker"; import {PopoverController} from "ionic-angular";

constructor(public popoverCtrl: PopoverController) {} presentPopover(event: Event) { let popover = this.popoverCtrl.create(ColorPage); popover.present({ev: event}); } ```

That's it!