更新时间:2023-11-26 16:32:16
你需要这样配置库:
System.config({地图: {'angular2-color-picker': 'node_modules/angular2-color-picker'},包:{(……)'angular2-颜色选择器':{格式:'注册',默认扩展:'js'}}});
I want to use a color picker in angular2. I tried using npm angular2-color-picker library. But i could see only a blank screen after including the directive. (No error found in console). Please help me by knowing where i am going wrong or let me know whether there is any other angular2 library available for color picking.Thanks in advance.
My HTML includes:
<div>
<label>Primary</label>
<input [(colorPicker)]="color" [style.background]="color" [value]="color"/>
</div>
My TS: (AppComponent page routes to DesignPage)
import {Component, OnInit} from 'angular2/core';
import {ColorPickerDirective} from 'angular2-color-picker/app/color-picker/color-picker.directive';
@Component({
selector: 'my-design',
templateUrl: 'wwwWeb/build/component/design/design.html',
directives: [ColorPickerDirective]
})
export class DesignPage implements OnInit {
private color: string = "#127bdc";
}
My Boot.ts
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
import {ColorPickerService} from './color-picker/color-picker.service'
bootstrap(AppComponent, [ColorPickerService]);
My Tsconfig
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"../node_modules",
"typings/main",
"typings/main.d.ts"
]
}
You need to configure the library this way:
System.config({
map: {
'angular2-color-picker': 'node_modules/angular2-color-picker'
},
packages: {
(...)
'angular2-color-picker': {
format: 'register',
defaultExtension: 'js'
}
}
});