How can I get the input value in ionic 2 in my component?

Question

i will create an application for shopping with ionic 2 , in the details of the products I create a stapler to increase and decrease the quantity.

My question is : how can I get the input value inside ionic 2 in my component?

Answer 1

Decision:

1 - app/pages/index.html

In Angular 2, you should use ngModel in the template.

 <ion-header> <ion-navbar primary> </ion-navbar> </ion-header> <ion-content> <ion-item> <button lightgray full (click)="incrementQty()">+</button> <ion-item> <ion-input type="number" min="1" [value]="qty" [(ngModel)]="qty"></ion-input> </ion-item> <button lightgray full (click)="decrementQty()">-</button> </ion-item> </ion-content> 

2 - app/pages/index.ts

 import { Component} from '@angular/core'; import { NavController, Slides} from 'ionic-angular'; @Component({ templateUrl: 'build/pages/titlepage/titlepage.html', }) export class titlePage { qty:any; constructor(private nav: NavController) { this.qty = 1; } // increment product qty incrementQty() { console.log(this.qty+1); this.qty += 1; } // decrement product qty decrementQty() { if(this.qty-1 < 1 ){ this.qty = 1 console.log('1->'+this.qty); }else{ this.qty -= 1; console.log('2->'+this.qty); } } } 

Answer 2

Or, as an alternative, you can use more appropriate Form controls designed for angular 2. ( learn more here )

Example:

Typescript

 import {Component, Input} from '@angular/core'; import {FORM_DIRECTIVES, FormBuilder, ControlGroup, AbstractControl} from '@angular/common'; import {IONIC_DIRECTIVES} from 'ionic-angular'; @Component({ selector: 'chat-form', templateUrl: '/client/components/chat-form/chat-form.html', directives: [IONIC_DIRECTIVES, FORM_DIRECTIVES], pipes: [], styleUrls: [] }) export class ChatFormComponent { chatForm:ControlGroup; messageInput:AbstractControl; constructor(private translate:TranslateService, private formBuilder:FormBuilder) { this.chatForm = formBuilder.group({messageInput: ['']}) this.messageInput = this.chatForm.controls['messageInput']; } sendMessage() { console.log('sendMessage: ', this.messageInput.value); } } 

Template

 <form [ngFormModel]="chatForm" (ngSubmit)="sendMessage()"> <ion-input type="text" [ngFormControl]="messageInput" placeholder="{{'chat.form.placeholder' | translate }}"></ion-input> <button fab> <ion-icon name="send"></ion-icon> </button> </form>