show and hide angular component

Question

I have implemented a component to change the font color in a text, and this component is opened through a button and hidden when clicked on the same button or elsewhere outside the color component. When clicked on the button to hide it is OK, because just change the value of the control variable, the problem is when clicked outside the component, it is necessary to hide it, I do not know if my solution is the best, then I wanted to know your opinion and if there is a better solution than mine.

The image below shows the open component:

the way I found to make this work was as follows:

<div #color (blur)="onBlur()" *ngIf="showColorPicker" class="color-picker open" tabIndex="0">

I created a routine to set the focus on my piece whenever it is render, via the code below:

@Input() public showColorPicker: boolean;
@Output() public showColorPickerChange: EventEmitter<boolean> = new EventEmitter<boolean>();
@ViewChildren('color') public color: QueryList<any>;

ngAfterViewInit(): void {
    this.color.changes.subscribe((d: QueryList<any>) => {
      if (d.length) {
        const elementColor = document.querySelector('.color-picker') as HTMLElement;
        elementColor.focus();
      }
    });
  }

And I created a Blur event to hide the component when clicked out of it, that is, when the compound loses focus, through the code below:

onBlur(): void {
    this.showColorPickerChange.emit(false);
  }