D-Net

import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core';

@Component({

  selector: 'color',

  template: `

    <div [class]="(addMargin?'uk-margin-small-top':'') + ' colorPicker'">

      <div class="uk-grid uk-flex uk-flex-middle uk-remove-margin">

        <div class="uk-width-2-3"> {{label}}:</div>

        <div class="uk-width-1-3 uk-padding-remove-left">

          <input class="uk-margin-small-left uk-width-small "  color-picker [colorPicker]="color"   [style.background]="color"

                 (colorPickerChange)="color=$event; colorChanged();"/>

        </div>

      </div>

    </div>

  `

})

export class ColorComponent implements OnInit {

  @Input() color = 'white';

  @Input() label = 'Color';

  @Input() addMargin: boolean = false;

  @Output() colorChange = new EventEmitter();

  constructor() {

  }

  ngOnInit() {

  }

  colorChanged() {

    this.colorChange.emit(this.color);

  }

}