How do I send data from HTML to my a var in my component in angular 6

Question

I am making an app where you are suppose to be able to edit notes but I am str <textarea class="form-control displayNoteTextAreaD" >{{notesService.ActiveNote.note}}</textarea> - this is displaying the current note I have in the database.

<button (click)="saveNote()" class="button" >Save Note</button>

When I click this button I want to save the new data in a var.

I dont want it to be two way binding.

I have a note: String = "" in my component

This is saveNote()

  saveNote(){
const note =  {
  title: this.notesService.ActiveNote.title,
  note: (the new note),
  type: this.notesService.ActiveNote.type,
  voice: this.notesService.ActiveNote.voice,
  user_id: this.userServices.ActiveUser.id,
  id: this.notesService.ActiveNote.id
}
const _note: Note =  new Note(note);
console.log(_note);
this.notesService.updateUserNote(_note).subscribe(data => {
  console.log(data);
})}

Answer 1

Edit your textarea this way:

<textarea #tarea value="" class="form-control displayNoteTextAreaD" >{{notesService.ActiveNote.note}}</textarea>

Add this to your button:

<button (click)="saveNote(tarea.value)" class="button" >Save Note</button>

your saveNote function should be like this:

  saveNote(noteValue){
const note =  {
  title: this.notesService.ActiveNote.title,
  note: noteValue, // <------
  type: this.notesService.ActiveNote.type,
  voice: this.notesService.ActiveNote.voice,
  user_id: this.userServices.ActiveUser.id,
  id: this.notesService.ActiveNote.id
}
const _note: Note =  new Note(note);
console.log(_note);
this.notesService.updateUserNote(_note).subscribe(data => {
  console.log(data);
})}