How to get input text value in ionic

Question

I'm trying to get input text value and store it in a variable named input in ionic. But I tried and failed. Can anyone please tell me what I have faulty done?

This is my HTML

  <ion-content>
  <ion-list>
    <ion-item> 
        <ion-label stacked>display</ion-label>
      <ion-input type="text" text-right id="input" ></ion-input>
    </ion-item>    
  </ion-list>
  </ion-content>

and this is my home.ts in ionic

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {
    var input=document.getElementById('input').nodeValue;
    document.getElementById('seven').innerHTML=input;
  }
  
}

Sajeetharan · Accepted Answer · 2018-01-14 19:07:16Z

33

Actually you seems to be using angular not angularjs, use [(ngModel)]

 <ion-input type="text" [(ngModel)]="name" text-right id="input" ></ion-input>

and inside the component,

name:string;

so whenever you need the value , you can use.

console.log(this.name);

edited Jan 14, 2018 at 19:07

answered Jan 14, 2018 at 19:02

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Jananath Banuka Over a year ago

I tried this. but is this ng-model works for newer versions too?

Sajeetharan Over a year ago

what do you mean by new versions?

Jananath Banuka Over a year ago

and how do I get ng-model value to whenever I needed?

Jananath Banuka Over a year ago

This is the error I'm getting: [ts] Argument of type '{ selector: string; templateUrl: string; name: string; }' is not assignable to parameter of type 'Component'. Object literal may only specify known properties, and 'name' does not exist in type 'Component'.

Sajeetharan Over a year ago

did you restart the application?

|

Ofir G · Accepted Answer · 2018-01-16 11:26:28Z

<ion-content>
  <ion-list>
    <ion-item> 
      <ion-label stacked>display</ion-label>
      <ion-input type="text" text-right id="input" [(ngModel)]="inputValue"></ion-input>
    </ion-item>    
  </ion-list>
</ion-content>

// ===

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
    inputValue: string = "";
    constructor(public navCtrl: NavController) {}

    someFunction() {
        // here you can use the 'this.inputValue' and get the value of the ion-input 
    }

}

we use the two way binding the value of ion-input with the class member inputValue,

about ngModel

whan you need to access on the value of the input, check the value of inputValue.

here you can see an exemple I wrote on StackBlitz

Two-way binding is a combination of both property binding and event binding as it is a continuous synchronization of data/values from presentation layer to component and from component to the presentation layer.

Since this is a two way binding we have to use both the brackets - [ ( ) ]. Also ngModel is a directive which is used to bind the data both ways.

Joundill · Accepted Answer · 2021-01-26 00:26:08Z

1

In Ionic 5 - The way to get the value of an ion-input value when focusing:

<ion-input (ionFocus)="onFocusPlace($event)"></ion-input>

onFocusPlace(event){
    this.value = event.target.value;
}

edited Jan 26, 2021 at 0:26

Joundill

7,84113 gold badges40 silver badges54 bronze badges

answered Jan 25, 2021 at 22:31

Oren Levy

113 bronze badges

1 Comment

GBra 4.669 Over a year ago

Hi, welcome to SO! Please leave some description when you answer the questions, do not simply provide some code (e.g. why your code works, what was the problem of the OP code).

Collectives™ on Stack Overflow

How to get input text value in ionic

3 Answers 3

11 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related