How can I disable the click button when the editor of ngx-quill is empty in angular?

Question

I am using ngx-quill editor below in which any text can be entered an it will show using a click button. The issue that currently I am facing is that I can click the button even I have not entered any text into it and keep going on like below:

I want that when there is no text inside this editor the button should remain disabled and when I type something it becomes enabled.

below in ts file i have written the function for click button.

and in html file there is a quill editor and custom button. also i am using customToollbar. Anyone can help me how I can do this?

components.ts file

@ViewChild('editor', { static: false }) editor!: QuillEditorComponent;

public stringMessages: string[] = [];

sendMessage(){ 
    return this.stringMessages.push(this.editor.quillEditor.root.innerHTML)
  }

compoenent.html

<quill-editor customToolbarPosition="bottom"  id="quill-id" #editor placeholder="Type your message..."  [styles]="toolbarStyle">

<span class="ql-formats-send">
                <button class="ql-send-button" (click)="sendMessage()"><fa-icon [icon]="faMessage"></fa-icon></button>
            </span>

</quill-editor>

Answer 1

components.ts file - add text field

@ViewChild('editor', { static: false }) editor!: QuillEditorComponent;

public text: string | undefined;
public stringMessages: string[] = [];

sendMessage(){
    if (!this.text) {
        return;
    }
    return this.stringMessages.push(this.editor.quillEditor.root.innerHTML)
  }

compoenent.html - add ngModel with text fields and disabled directive

<quill-editor [(ngModel)]="text" customToolbarPosition="bottom"  id="quill-id" #editor placeholder="Type your message..."  [styles]="toolbarStyle">

<span class="ql-formats-send">
                <button class="ql-send-button" (click)="sendMessage()" [disabled]="!text"><fa-icon [icon]="faMessage"></fa-icon></button>
            </span>

</quill-editor>