How to access editable div inside of angular component

Question

I`m looking for way to access div from html template I have this in html

<div #postStatus contenteditable="true" class="form-control" placeholder="" (keyup)="postForm.value.content=postStatus.innerText"></div>

And now I need to access that value to reset it in function which takes this value to const which I sending with request. I have tried this

postStatus.innerText = null;

But this gives me error:

ERROR ReferenceError: postStatus is not defined

Is there any proper way to access that value from my component.ts file? And also to have different text which person see and which actualy is submiting (it must be @[mongoose object id], but user need to see name and surname of person which they picked from list that apears when they start writing @+upper case, but if they not pick, but write name and surname even with @ it must be shown exact text of what they written)

Answer 1

Something like this should work :

 import { Component, ElementRef, ViewChild} from '@angular/core';

   class SomeCmp {
      @ViewChild("postStatus") postStatus : ElementRef;

      reset(){
        this.postStatus.nativeElement.innerText = "";

      }
    }

Demo