20170531 作業實做參考

color-plate.component.html

<div class="color"
     [ngStyle]="{'background-color': myStyle}"
     (click)="picked.emit(myStyle)"></div>

<div *ngIf="show; else edit" class="tweak">
  <input type="range" min="0" max="255" [(ngModel)]="r">
  <span style="color: red">{{ r }}</span><br />
  <input type="range" min="0" max="255" [(ngModel)]="g">
  <span style="color: green">{{ g }}</span><br />
  <input type="range" min="0" max="255" [(ngModel)]="b">
  <span style="color: blue">{{ b }}</span><br />
  <button (click)="show = false">Close</button>
</div>

<ng-template #edit>
  <button (click)="show = true">Edit</button>
</ng-template>