Как вызвать праймер праймера с помощью кнопки?

Question

Вот ссылка на стек: https://stackblitz.com/edit/angular-gtv8vo?file=src/app/app.component.html

Здесь средство выбора цвета не открывается при нажатии кнопки? Как открыть цветную палитру по нажатию кнопки?

<p-colorPicker [(ngModel)]="color"></p-colorPicker>
<button class="btn btn-primary">Add COlor</button>

Answer 1

Простой способ:

<p-colorPicker #pcp [(ngModel)]="color"></p-colorPicker>
<button class="btn btn-primary" (click)="pcp.onInputClick()">Add Color</button>

Answer 2

Используйте ViewChild и вызывайте их onInputClick().

В AppComponent добавьте @ViewChild и импортируйте компонент ColorPicker.

import { Component, ViewChild } from '@angular/core';
import { ColorPicker} from 'primeng/colorpicker';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  @ViewChild('colorpicker') colorpicker: ColorPicker;
  name = 'Angular';
  color:any;

  clickButton(): void {
    this.colorpicker.onInputClick()
  }
}

Шаблон:

<p-colorPicker #colorpicker [(ngModel)]="color"></p-colorPicker>
<button class="btn btn-primary" (click)="clickButton()">Add COlor</button>

Рабочий пример