How to initialize Color Circle without state

[Alfredo-Mendoza]

Hi

I am trying to initialize <color-cycle> without the previous state. My application is to create a list of tasks and I want the user to be able to select the priority of the task with a color. When I run the app for the first time, <color-cycle> works fine because I don't have any colors selected and I can create a new task, but if I want to add another task when the dialog opens, <color-cycle> is active with the previous selection.

I want to open the dialog to create a new task without <color-cycle> showing with the previous selection. Any suggestion?

This is my code

import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ColorEvent } from 'ngx-color';
import { MessageService } from 'primeng/api';
import { Task } from '../../../interfaces/task.interface';
import { ColorCircleModule } from 'ngx-color/circle';

@Component({
  selector: 'new-task',
  templateUrl: './new-task.component.html',
  styles: [
    `
      .new-task{
        position: fixed;
        right: 30px;
        bottom: 30px;
      }

      #taskName{
        width: 100%;
      }
    `
  ],
  providers: [MessageService]
})
export class NewTaskComponent implements OnInit{

  @Output() newTask: EventEmitter<Task> = new EventEmitter<Task>();

  task: Task = {
    name: '',
    description: '',
    priority: '',
    category: ''
  };

  display: boolean = false;
  formNewTask: FormGroup;
  colors: string[] = [];

  constructor(
    private formBuilder: FormBuilder,
    public messageService: MessageService
  ) {
    this.formNewTask = this.formBuilder.group({
      name: ['', Validators.required],
      description: ['', Validators.required],
      priority: ['#eb144c', Validators.required],
      category: ['', Validators.required]
    });
  }

  ngOnInit(): void {
    this.colors = ['#eb144c', '#ffe082', '#8ed1fc'];
  }

  showDialog(): void {
    this.display = true;
  }

  saveTask(): any {
    if (this.formNewTask.valid) {
      
      this.task = {
        name: this.formNewTask.controls['name'].value,
        description: this.formNewTask.controls['description'].value,
        priority: this.formNewTask.controls['priority'].value,
        category: this.formNewTask.controls['category'].value
      }
      
      this.showSuccess();
      this.formNewTask.reset();

      this.newTask.emit(this.task);
      
      setTimeout(() => {
        this.display = false;
      }, 1000);
      
    } else {
      this.showErrors();
    }
  }

  changeComplete($event: ColorEvent) {
    this.formNewTask.controls['priority'].setValue($event.color.hex);
  }

  showSuccess() {
    this.messageService.add({severity:'success', summary: 'Success', detail: 'Task Created'});
  }
  showErrors() {
    this.messageService.add({severity:'error', summary: 'Error', detail: 'Complete the fields'});
  }

  clear() {
      this.messageService.clear();
  }
}

This is the code for the <color-circle></color-circle> that I'm using

<color-circle [colors]="colors" (onChange)="changeComplete($event)" (onChangeComplete)="changeComplete($event)"></color-circle>