ngx-quill - Only show toolbars when editor has focus

I have an Angular application that uses many Quill editors. To reduce the noise on the pages, I would like to only show the quill toolbars when the specific editor has focus. Is there a simple way to do this?

There is no method for hide or show the toolbar after editor initializes. but with the help of css we able to hide and show the toolbar.

editor.component.html

<quill-editor [(ngModel)]="htmlText"
     placeholder="Enter Text"
     [modules]="quillConfig"
     (onSelectionChanged)="onSelectionChanged($event)"></quill-editor>

editor.component.ts

  onSelectionChanged = (event) =>{
     if(event.oldRange == null){
        this.onFocus(event);
     }
     if(event.range == null){
        this.onBlur(event);
     }
  }

  onFocus(event) {
    event.editor.theme.modules.toolbar.container.style.visibility = "visible";
  }

  onBlur(event) {
    event.editor.theme.modules.toolbar.container.style.visibility = "hidden";
  }

editor.component.css

    :host ::ng-deep .ql-toolbar{
      visibility: hidden;
    }
    
    :host ::ng-deep .ql-container {
      border-top: 1px solid #ccc
       !important
      ;
    }