20170531 作業實做參考

app.component.css

.main {
  width: 100%;
  height: 200px;
  border: 1px solid gray;
  margin-bottom: 20px;
}

app.component.html

<div [style.background-color]="defaultColor" class="main"></div>

<div>
  <app-color-plate
    *ngFor="let color of colors"
    [default]="color" (picked)="defaultColor=$event"></app-color-plate>
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {

  defaultColor = 'rgb(0, 0, 255)';

  colors = [
    [255, 255, 255], // 白
    [0, 0, 0], // 黑
    [255, 0, 0], // 紅
    [0, 255, 0], // 綠
    [0, 0, 255] // 藍
  ];

}

color-plate.component.css

:host {
  display: inline-block;
  margin-right: 10px;
  vertical-align: top;
}

.color {
  width: 100px;
  height: 100px;
  border: 1px solid gray;
  margin-bottom: 10px;
}

.tweak {
  width: 102px;
}

.tweak > input {
  width: 60%;
}

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>

color-plate.component.ts

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

@Component({
  selector: 'app-color-plate',
  templateUrl: './color-plate.component.html',
  styleUrls: ['./color-plate.component.css']
})
export class ColorPlateComponent {

  show = false; // 是否顯示顏色調整拉桿
  r = 100;
  g = 100;
  b = 100;

  // Input and setter
  @Input() set default(color: number[]) {
    this.r = color[0];
    this.g = color[1];
    this.b = color[2];
  }

  @Output() picked = new EventEmitter<string>();

  // This is getter
  get myStyle(): string {
    // 回傳字串，如 rgb(100, 200, 250)
    return `rgb(${this.r}, ${this.g}, ${this.b})`;
  }

}