Using Angular 4 (typescript), I have the below HTML code:

 <div *ngIf="dataService.selected_markers.length == 0" id="tsnPasteContainer">
      <form style="width: 100%; height: 100%">
        <textarea id="tsn_list" style="width: 100%; height: 100%" type="text" name="tsn_list" placeholder="e.g. 2001311,2425302,2153542,2435974"></textarea>
      </form>
    </div>

I am trying to get the data that the user is typing into the textarea using:

public parseTSNs(){
    let tsnString = document.getElementById("tsn_list").value;
    console.log("User inputted string: " + tsnString);
}

This function is called by a button.

The code is not compiling due to:

Property 'value' does not exist on type 'HTMLElement'

This should be a simple function. What am I doing wrong? W3schools "getting values from textarea" shows '.value' as the required function!

Using Angular 4 (typescript), I have the below HTML code:

 <div *ngIf="dataService.selected_markers.length == 0" id="tsnPasteContainer">
      <form style="width: 100%; height: 100%">
        <textarea id="tsn_list" style="width: 100%; height: 100%" type="text" name="tsn_list" placeholder="e.g. 2001311,2425302,2153542,2435974"></textarea>
      </form>
    </div>

I am trying to get the data that the user is typing into the textarea using:

public parseTSNs(){
    let tsnString = document.getElementById("tsn_list").value;
    console.log("User inputted string: " + tsnString);
}

This function is called by a button.

The code is not compiling due to:

Property 'value' does not exist on type 'HTMLElement'

This should be a simple function. What am I doing wrong? W3schools "getting values from textarea" shows '.value' as the required function!

• javascript
• html
• angular
• typescript

• Please provide your whole relevant code. Based on the one from your question I succesfully made a working snippet jsfiddle.net/m1feyL6o – Ionut Necula Commented Jul 11, 2017 at 7:39
• Try to use ngModel or #templateVariable – Yordan Nikolov Commented Jul 11, 2017 at 7:41
• Uh? Instead of using vanilla JS and getElementById, why don't you use Angular?... like, bind a model : <textarea [(ngModel)]='textareaValue'></textarea> – Jeremy Thille Commented Jul 11, 2017 at 7:42

4 Answers 4

You just have to assert that the type of your element is HTMLTextAreaElement. Because document.getElementById returns HTMLElement and not all html elements have the value property:

let tsnString = (document.getElementById("tsn_list") as HTMLTextAreaElement).value;

But seeing as you use Angular, you should probably be using data binding instead of querying the values yourself

I had faced a similar issue while setting the value of a cell in the table.

I was adding the data as follows:

document.getElementById("table_id").rows[0].cells[0].innerHTML = "data_to_be_added";

And I was getting the following error:

error TS2339: Property 'rows' does not exist on type 'HTMLElement'

Property 'cells' does not exist on type 'HTMLElement'

So I added the following tag and the ERROR got resolved.

(document.getElementById("table_id") as any).rows[0].cells[0].innerHTML = "data_to_be_added";

Here, you are expicitly changing the type of the variable as any.

You should use: [(ngModel)]='yourValue' to bind data to your controller. Textarea doesn't use value parameters.

Pleas read more information about HTML tag and its attributes hire.

Although it's not supposed to work like that, If you want to do it like this, first give your tag a reference with a # :

<div *ngIf="dataService.selected_markers.length == 0" id="tsnPasteContainer">
    <form style="width: 100%; height: 100%">
        <textarea #myTA style="width: 100%; height: 100%" type="text" name="tsn_list" placeholder="e.g. 2001311,2425302,2153542,2435974"></textarea>
    </form>
</div>

Then, in your component, import this :

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

Declare a variable matching your reference :

@ViewChild('myTA') myTextArea: ElementRef;

In your method :

parseTSNs() {
    let el = this.myTextArea.nativeElement as HTMLElement;
    console.log(el.value);
}