CODEWITHSUNDEEP
javascripttypescriptionic-frameworkionic2
CupOfTea
CupOfTea

Reputation: 173

Ionic 2 - Property does not exist on type error

I am developing something in Ionic 2 and am stuck at a simple thing.

I have a Textbox where I want to type a text in and where the text should appear. I used this code from this website and modified it a bit.

It works in a simple HTML/JS program. I think it has something to do with the fact that I use also Typescript in my Ionic Project.

HMTL:

<p>This is a  <b id='TextToChange'>Test</b> </p>
<input type='text' id='userInput' value='Enter Text' />
<input type='button' (click)='changeText()' value='Change Text' />

JS/TS:

changeText() {
var userInput = document.getElementById('userInput').value;
document.getElementById('TextToChange').innerHTML = userInput;
}

Then I get an error in Visual Studio (see screenshot below). I then changed the code to this:

var userInput = document.getElementById('userInput').nodeValue;

In VS I don't get an error anymore but if I press the button the program won't grab the value so it lets the original value vanish and stays blank. No error log for this one.

Does anyone have an idea?

enter image description here

Upvotes: 1

Views: 1324

Answers (2)

CupOfTea
CupOfTea

Reputation: 173

I came to a solution.

HTML:

<p id='TextToChange'>{{value}}</p>
<input #box (keyup.enter)="changeText(box.value)">
<input type='button' (click)='changeText(box.value)' value='Change Text' />

NOTE: Add the following below your export class! JS/TS:

value = '';
changeText(value: string) { this.value = value; }

You can either press Enter or you can press on the Button to display the text.

Upvotes: 2

EDREP
EDREP

Reputation: 98

Use: 

var userInput = document.getElementById('userInput').innerText;

Warning: I would strongly recommend you to read the documentation about Angular 2 Data binding.

Under the section "Binding syntax" you can see examples of how this is done using Angular 2. This also applies for Ionic 2. You should really do it the way it is shown there.

Upvotes: 1

Related Questions