how to add Auto focus in Quill Editor (text area) in Angular

Question

I am working with Angular. In my project, I want the text cursor automatically populate in the text box without the user having to click on it before they type. The modal has an editor and it is set by the quill package app-ngx-mat-quill. Now, when I removed the quill editor and used the \<textarea/\> tag, the focus works fine. but I need the editor in that modal as well. I still couldn't solve it. I am giving some of my code below

This is the line from HTML

<mat-form-field>
              <app-ngx-mat-quill [editorOption]="{toolbar: [['bold', 'italic', 'underline', 'strike'], [{ 'list': 'ordered'}, { 'list': 'bullet' }]]}" [spellcheck]="true" [placeholder]="data.placeholder ? data.placeholder : 'Enter Closing Notes'" formControlName="note"></app-ngx-mat-quill>
            </mat-form-field>

This is my TS file

export class ClosingNoteConfirmationComponent implements OnInit {

  closingNoteForm: FormGroup;

  constructor(private formBuilder: FormBuilder,
              private toastrService: ToastrService,
              public dialogRef: MatDialogRef<ClosingNoteConfirmationComponent>,
              @Inject(MAT_DIALOG_DATA) public data: DialogData) { }

  ngOnInit() {
    this.closingNoteForm = this.formBuilder.group({
      note: [{value: this.data.note, disabled: false}],
      closingNotesCustomerVisible: [this.data.closingNotesCustomerVisible]
    });
  }

  get formControls() { return this.closingNoteForm.controls; }

  onOkClick() {
    if (this.closingNoteForm.invalid) {
      const errorMsg = [];
      for (const inputControlName in this.formControls) {
        if (this.formControls[inputControlName]) {
          const controlName = inputControlName;
          const control = this.formControls[inputControlName];
          if (control.invalid) {
            const inputName = controlName.replace(/([A-Z])/g, ' $1').replace('_', ' ').replace(/^./, str => str.toUpperCase());
            if (control.errors.hasOwnProperty('required') && control.errors.required) {
              errorMsg.push(`* ${inputName} is required field`);
            }
          }
        }
      }
      if (errorMsg.length > 0) {
        this.toastrService.error(errorMsg.join('<br/>'), 'Invalid closing note form value', {
          enableHtml: true,
          timeOut: 10000
        });
      }
      return;
    }

    const formData = this.closingNoteForm.getRawValue();
    this.dialogRef.close({isConfirmed: true, closingNote: formData.note, closingNotesCustomerVisible: formData.closingNotesCustomerVisible});
  }

  onNoClick() {
    this.dialogRef.close({isConfirmed: false});
  }

}