I'm an ionic beginner, I'm trying to push user input to Firebase,
in my html file:
<ion-item>
<ion-label>E-mail </ion-label>
<ion-input type="email" value="" placeholder="Type your e-mail"></ion-input>
</ion-item>
I have the inputtext field, but I handle firebase operations in my ts file, how can I send this input value to my ts file so I can push it?
In the component class file (what you call ts file), you can add a class member, let's call it email:
#Component({
...
})
export class MyComponent {
private email: string;
}
And you can bind it in your template with ngModel:
<ion-item>
<ion-label>E-mail </ion-label>
<ion-input [(ngModel)]="email" type="email" value="" placeholder="Type your e-mail"></ion-input>
</ion-item>
Related
I am trying to take amount to be transacted as input from user deduct it from the wallet of the user and then display the updated wallet. The wallet already is pre-loaded with 100 units of money. But when I run the app only 100 is displayed and the changes are not reflected. what do I do ?
Here is my html code
<ion-row>
<ion-col class="txt2" size="6" text-left >Company<br><ion-text class="bal">Balance & gms</ion-text>
</ion-col>
<ion-col class="text2" size="6" text-right ><ion-item><ion-input type="number" value="{{ wallet }}" [(ngModel)]="wallet" class="ion-text-end"></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-item class="transact-display">
<ion-input type="number" placeholder="Enter amount" [(ngModel)]="amount" name="amount"></ion-input>
</ion-item>
<ion-button class="transact" type="submit" expand="block" (click)="transact()">Transact</ion-button>
The ts file
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/router';
#Component({
selector: 'app-transaction',
templateUrl: './transaction.page.html',
styleUrls: ['./transaction.page.scss'],
})
export class TransactionPage implements OnInit {
constructor(public router : Router) {}
wallet: number = 100;
amount: number ;
ngOnInit() {
}
transact() {
this.router.navigateByUrl('/congratulation');
this.wallet = this.wallet - this.amount;
return this.wallet;
}
}
Actual behaviour:
No change in the displayed amount. 100 is only displayed even after the Transact button is clicked.
Expected behaviour:
when the user logs in for the 1st time, 100 should be displayed. When the user transacts amount, say 20, 20 should be deducted from 100 and 80 should be displayed.
Angular is 2 way data binding framwwork:
Use Angular interpolation:
.html
<ion-item>
{{wallet}}
</ion-item>
<ion-item class="transact-display">
<ion-input type="number" placeholder="Enter amount" [(ngModel)]="amount" name="amount"></ion-input>
</ion-item>
<ion-button class="transact" type="submit" expand="block" (click)="transact()">Transact</ion-button>
.ts
wallet: number = 100;
amount: number ;
ngOnInit() {
}
transact() {
this.wallet = this.wallet - this.amount; // this will update wallet automatically.
this.router.navigateByUrl('/congratulation');
}
In my ionic select i got output like small down arrow rather than a full select tag and for input tag just a blank space. I can enter data but UI not looks good. Is there any css i need to add.
<ion-card class='sc-ion-card-md-h'>
<ion-card-header>
<ion-card-subtitle>Name:</ion-card-subtitle>
<ion-card-title>
<ion-select #inputName id="username" class="form-control">
<ion-select-option>SELECT</ion-select-option>
<ion-select-option>Monicka</ion-select-option>
<ion-select-option>Hema</ion-select-option>
<ion-select-option>Ramesh</ion-select-option>
<ion-select-option>Madhavan</ion-select-option>
<ion-select-option>Aadhavan</ion-select-option>
<ion-select-option>Madhan</ion-select-option>
<ion-select-option>Prasanth</ion-select-option>
</ion-select>
</ion-card-title>
</ion-card-header>
<ion-card-header>
<ion-card-subtitle>Date:</ion-card-subtitle>
<ion-card-title>
<ion-input type="text" #inputDate id="date" class="form-control"></ion-input>
</ion-card-title>
</ion-card-header>
</ion-card>
Output looks like this...
It seems like you are trying to convert a Bootstrap form over to Ionic and you are bringing some jQuery thinking along with it.
This is how you would do it with an Ionic page:
page.html
<ion-header>
<ion-toolbar>
<ion-title>card-select</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card>
<ion-list>
<ion-item>
<ion-label position="stacked">Name:</ion-label>
<ion-select [(ngModel)]="username" placeholder="SELECT">
<ion-select-option>Monicka</ion-select-option>
<ion-select-option>Hema</ion-select-option>
<ion-select-option>Ramesh</ion-select-option>
<ion-select-option>Madhavan</ion-select-option>
<ion-select-option>Aadhavan</ion-select-option>
<ion-select-option>Madhan</ion-select-option>
<ion-select-option>Prasanth</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label position="stacked">Date:</ion-label>
<ion-input [(ngModel)]="date"></ion-input>
</ion-item>
</ion-list>
</ion-card>
</ion-content>
page.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-card-select',
templateUrl: './card-select.page.html',
styleUrls: ['./card-select.page.scss'],
})
export class CardSelectPage implements OnInit {
username: string;
date: string;
constructor() { }
ngOnInit() {
}
}
notes
You don't need all those classes you put on.
Using label position="stacked" puts it above the input.
You dont need to bind the name like #username or id="username". What you do is put a variable on the page behind it and then use ngModel to bind to it. Any change that is made to the user interface (typing into a box, selecting an option) is then automatically set to the variable in the page. This works both ways because of the [()] syntax, so if you change username with something like this.username = "superman"in the code then the input box on the page will automatically update to match that value as well.
You don't need type="text" on the input, its the default.
You can use the placeholder attrib to pass some SELECT text instead of having an extra select option.
I have a form with array values in this array format since I don't know how to dynamically add form inputs, I had to manually do it. Now when I tried submitting the form, this error got display ERROR TypeError: Cannot read property 'value' of undefined
post.html
<ion-item class="mylist chat-item item-remove-animate item-avatar item-icon-right list card animated fadeInUp">
<ion-input type="text" readonly name="party" placeholder="APC" value="apc"></ion-input>
<ion-input type="number" placeholder="Total Votes" name="vote" #vote></ion-input>
</ion-item>
<ion-item class="mylist chat-item item-remove-animate item-avatar item-icon-right list card animated fadeInUp">
<ion-input type="text" readonly name="party" value="pdp"></ion-input>
<ion-input type="number" placeholder="Total Votes" name="vote" #vote></ion-input>
</ion-item>
<ion-item class="mylist chat-item item-remove-animate item-avatar item-icon-right list card animated fadeInUp">
<ion-input type="text" readonly name="party" value="apga"></ion-input>
<ion-input type="number" placeholder="Total Votes" name="vote" #vote></ion-input>
</ion-item>
post.ts
#ViewChild("party") party;
#ViewChild("vote") vote;
#ViewChild("phones")phones;
submit(){
let data = {
party: this.party.value,
vote: this.vote.value,
phone: this.phones.value
};
}
Please how can I pass these array values?
Thanks
Use ngModel.
post.html
<ion-input type="number" placeholder="Total Votes" name="vote" [(ngModel)]="party"></ion-input>
post.ts
export class Post {
party;
constructor() {}
submit(){
let data = {
party: this.party };
}
}
check this example
I'm new to Ionic and I would like to know how I can pass data that is in between the <p></p> HTML tag to my home.ts file. I have tried doing getElementById but that doesn't seem to work. Also ViewChild but with zero results. I'd like to have some help concerning this question.
From .ts -> html :
.ts-> varString : String = "Hallo world";
html-> {{varString}}
From html -> .ts depends of html tag
Ex. <input type=“text” name=“username” [(ngModel)]=“username”>
username is username : String = ""; and it changes avry time you update the input. Similar to other html tags. You can also get elements by id or class using Element of ionic angular
there is many way to pass data between html and ts, but you must have good understand about MVC design pattern. the MVC is the reason of why google introduced angular.
in angular (engine of ionic), your View(html in your project) knows everything about controller(ts file).
***** home.ts********
public MyName:string="jon";
MyFunc1()
{
alert(this.MyName);
}
MyFunc2()
{
this.MyName="other name";
alert(this.MyName);
}
*****home.html*******
<input type="text" [(ngModel)]="MyName" >
<p>{{MyName}}</p>
<button ion-button (click)="MyFunc1()" >MyFunc1</button>
<button ion-button (click)="MyFunc2()" >MyFunc2</button>
.
.
.
if you change the value of MyName in ts, then it will change automatically in html and also if you change you input value (that it is binded to MyName) it will change the MyName value in model (in ts).
Selecting DOM in ionic isn't a right way to change models value.
Taking the simple example of a Login page,
<ion-item>
<ion-label floating color="primary">Registered Email ID</ion-label>
<ion-input [(ngModel)]="login.email" name="email" type="text" #email="ngModel" spellcheck="false" autocapitalize="off"
required>
</ion-input>
</ion-item>
<ion-item>
<ion-label floating color="primary">Passcode</ion-label>
<ion-input [(ngModel)]="login.passcode" name="password" type="password" #password="ngModel" required>
</ion-input>
</ion-item>
The .ts code for this would be:
login= { username: '', email:'', mobile:'', passcode:'' };
That is literally it!
You can also go about without the login object and can declare variables like
username: any
email: any
and so on; and directly reference them in the html as
[(ngModel)]="username"
Hope it helps!
First try to understand that when you are working on Ionic, you are working on Angular but not Core Javascript.
and here is simple example that may help
home.html
import {Component} from '#angular/core';
import {NavController, AlertController} from 'ionic-angular';
#Component({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
name: string;
constructor(public navCtrl: NavController, private alertController: AlertController) {
}
showName() {
console.log(this.name);
let alert = this.alertController.create({
title: 'Hello ' + this.name + '!',
buttons: ['OK']
});
alert.present();
}
}
home.ts
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-label>{{ name }}</ion-label>
<ion-input [(ngModel)]="name"></ion-input>
<button (click)="showName()">Click Me</button>
</ion-content>
I want to perform some action whenever the input value or the slider is changed, but why is ngOnchanges not getting triggered when text or range input is changed?
Controller:
export class APage implements OnChanges {
#Input() total: string;
#Input() percentage: string;
constructor() {
}
ngOnChanges(changes: {[propName: string]: SimpleChange}) {
console.log('ngOnChanges');
}
}
Template:
<ion-list>
<ion-item>
<ion-label floating>Total</ion-label>
<ion-input type="text" [(ngmodel)]="total"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Percentage: {{percentage}} %</ion-label>
<ion-range [(ngModel)]="percentage" min="0" max="100">
</ion-range>
</ion-item>
</ion-list>
Update1:
Add #Input decorater as per the suggestion which didn't help.
Update2:
This works:
ion-range [(ngModel)]="percentage" min="0" max="100" (ionChange)="inputChanged()">
But it doesn't work for ion-input:
<ion-input type="text" [(ngmodel)]="total" (ionChange)="inputChanged()"></ion-input>
Update 3:
It worked with keyup:
<ion-input type="text" [(ngmodel)]="total" (keyup)="inputChanged()"></ion-input>
You might need to decorate aData with #Input()
Edit:
It's probably that you need to hook into the ionic events via the template. If it's beta 8, the event is called (ionChange), pre beta8 it's (change) , according to the changelog
so something like <ion-range [(ngModel)]="percentage" (ionChange)="changeFunc()" min="0" max="100">