ngx-color-picker로 설정한 컬러 코드를 얻는 방법

Angular용의 ColorPicker의 라이브러리로서 유명한 것이 ngx-color-picker 라고 하는 것이 있습니다.
개인적으로 설정한 컬러 코드를 꺼내는 데 시간이 걸렸으므로 메모가 나오면 여기에 남겨 둡니다.
내용적으로는 얇기 때문에, 외로움을 혼란스럽게 하기 위해 도입의 부분도 일본어 번역이라고 하는 대의명분의 밑에 ​​씁니다.

도입까지의 절차

설치

npm install ngx-color-picker --save

모듈 로드

import { ColorPickerModule } from 'ngx-color-picker';

@NgModule({
  ...
  imports: [
    ...
    ColorPickerModule
  ]
})

HTML에 통합

<input [(colorPicker)]="color" [style.background]="color"/>

실제 표시는 이런 느낌

정말 편리하네요.

실제의 이용 방법으로서 text 입력란의 색이 그대로 변화하는 것은 조금 외롭기 때문에, 이런 느낌에 컬러 팔레트와 같이 이용하는 것이 아닐까 생각합니다.



코드는 다음과 같은 느낌입니다.
CSS는 특히 해설도 없는 것은 아닙니다.

<section>
   <label>
      <input type="radio">
      <p class="color-pallet-custom"
         #ignoredInput
         [style.color]="color"
         [cpIgnoredElements]="[ignoredButton, ignoredInput]"
         [(cpToggle)]="toggle"
         [(cpPosition)]="top-right"
         [(colorPicker)]="color"></p>
   </label>
   <button #ignoredButton (click)="toggle=!toggle" class="btn-primary" type="button" ngbButtonLabel>色選択</button>
  </section>

주제

여기까지 설정할 수 있어 「(ﾟ∀ﾟ)이이!!」라고 되어 있었습니다만, 어떻게 값 꺼내도 상당히 시행착오했습니다. 실제로는 이런 느낌으로 꺼낼 수 있습니다.

코드

<input type="radio" [value]="this.color">

간단하네요.
예를 들어 reativeform을 사용하여 구현할 때 등은 이런 식으로 값을 전달할 수 있습니다.
내가 아직 Angular에 익숙하지 않았기 때문에 모르겠지만 상당히 시간이 걸렸습니다.
ngx-color-picker는 그 밖에도 편리한 옵션이 있으므로 꼭 참고해 보세요.

참고

ngx-color-picker
examples
How to Use Color Picker in Angular