Get input value from text area when clicking a button without using ngModel

Question

I am trying to get a text areas input value after a user click a button. I need the value in the .ts file.

Here is my code and attempt

    <div id="notes-container">
      <label>My Queries</label>
      <textarea id="query" placeholder="Enter here"></textarea>
      <button class="main" (click)="close()"> Back </button>
      <button class="main" (click)="sendQuery($query)"> Send Query </button>
    </div>

.ts file

console.log(this.query);

I currently get no value, any ideas?

Answer 1

You need to use reference variables like this:

<div id="notes-container">
  <label>My Queries</label>
  <textarea #textArea id="query" placeholder="Enter here"></textarea>
  <button class="main" (click)="close()"> Back </button>
  <button class="main" (click)="sendQuery(textArea.value)"> Send Query </button>
</div>

But I recommend using Reactive Forms for all forms/inputs related stuff.