Added draw color picker

src/app/components/palette/palette.component.html

@@ -1,3 +1,3 @@
-<div class="bg-white p-3">
-    <div *ngFor="let c of colors" class="rounded-circle" [style.backgroundColor]="c" style="height: 30px; width: 30px"></div>
+<div class="py-1">
+    <div *ngFor="let c of colors" class="m-3 color-palette" [ngClass]="{'selected': selected == c}" [style.backgroundColor]="c" (click)="selected = c"></div>
 </div>

src/app/components/palette/palette.component.scss

@@ -0,0 +1,9 @@
+.color-palette {
+  border-radius: 50% 50%;
+  width: 30px;
+  height: 30px;
+
+  &.selected {
+    border: 4px solid #3b5998;
+  }
+}

src/app/components/palette/palette.component.ts

@@ -1,9 +1,25 @@
-import {Component} from "@angular/core";
+import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
 
 @Component({
     selector: 'palette',
-    templateUrl: 'palette.component.html'
+    templateUrl: 'palette.component.html',
+    styleUrls: ['palette.component.scss']
 })
-export class PaletteComponent {
-    colors = ['#393936', '#ffffff', '#008dd5', '#1a891d', '#d82b00']
+export class PaletteComponent implements OnInit {
+    @Input() colors = ['#393936', '#ffffff', '#008dd5', '#1a891d', '#d82b00'];
+
+    @Output() selectedChange = new EventEmitter<string>();
+
+    private _selected;
+    get selected() { return this._selected; }
+    @Input() set selected(color: string) {
+        this._selected = color;
+        this.selectedChange.emit(this._selected);
+    };
+
+    constructor() { }
+
+    ngOnInit() {
+        if(!this.selected) this.selected = this.colors[0];
+    }
 }