Develop Reference

How to submit a form in Angular and send data back?

I'm building a form component to get some data from user and send them back to another component, which has to be updated according to these values.
In my code I have two components:
1) Balance page
2) Balance-add component
I'd like Balance page to be updated every time the user fills the form in Balance-menu component, and I need to create a new card in the Balance page for each form submitted.
Balance.page.ts:
constructor(
private router: Router,
) { }
ngOnInit() {
}
addToList() {
this.router.navigateByUrl('balance-add')
}
balance.page.html:
<ion-content>
<ion-card>
<ion-card-header>
<ion-card-title>Balance:</ion-card-title>
</ion-card-header>
<ion-card-content>
<div>
{{this.balance}}
</div>
</ion-card-content>
</ion-card>
//Here <ion-card> for each form submitted
//<ion-card *ngFor="let form of list_of_forms"></ion-card>
</ion-content>
<ion-footer>
<div>
<ion-icon name="add-circle" (click)="addToList()"></ion-icon>
</div>
</ion-footer>
The second component is balance-add.component.ts
(I don't know how to implement sendData method)
constructor() { }
ngOnInit() {}
sendData() {
// ???
}
and here's the html:
<div>
<ion-item>
<ion-label>How much did you spend?</ion-label>
<ion-select [(ngModel)]="buy.cost" okText="Okay" cancelText="Dismiss">
<ion-select-option value="ten">10</ion-select-option>
<ion-select-option value="twelve">20</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>What is the item?</ion-label>
<ion-input [(ngModel)]="buy.item" placeholder="E.g. Eggs></ion-input>
</ion-item>
<ion-button (click)="sendData()"> ADD TO BALANCE </ion-button>
</div>
Thanks

Calculate price from input text using ionic

I want to create a simple shopping list app with the price.
This is my shopping.html
<ion-header>
<ion-navbar color="secondary">
<ion-title align="center">
My Shopping Tracker
</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="addItem()"><ion-icon name="cart"></ion-icon></button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item *ngFor="let item of items" (click)="viewItem(item)">{{item.type}}</ion-item>
</ion-list>
</ion-content>
<ion-content>
<ion-list>
<ion-item-sliding *ngFor="let item of items">
<ion-item>
<h2>{{item.today}}</h2>
<p>{{item.type}}</p>
<p>{{item.total}}</p>
</ion-item>
<ion-item-options side="right">
<button ion-button (click)="delete(item)">
<ion-icon name="trash"></ion-icon>Delete
</button>
<button ion-button (click)="edit(item)">
<ion-icon name="redo"></ion-icon>Edit
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</ion-content>
<ion-footer>
<ion-toolbar >
<ion-title>{{total}}</ion-title>
</ion-toolbar>
</ion-footer>
This is the addshopping.html
<ion-header>
<ion-toolbar color="secondary">
<ion-title>
Add Shopping List
</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="close()"><ion-icon name="close"></ion-icon></button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-label>Date:</ion-label>
<ion-datetime displayFormat="DD-MM-YYYY HH:mm" [(ngModel)]="today"></ion-datetime>
</ion-item>
<ion-item>
<ion-label floating>Type:</ion-label>
<ion-input type="text" [(ngModel)]="type"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Description:</ion-label>
<ion-input type="text" [(ngModel)]="description"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Total Amount:</ion-label>
<ion-input type="text" [(ngModel)]="total"></ion-input>
</ion-item>
</ion-list>
<button full ion-button color="secondary" (click)="saveItem()">Save</button>
</ion-content>
This is my addlist.ts
import { Component } from '#angular/core';
import { NavController, ViewController } from 'ionic-angular';
#Component({
selector: 'page-addlist',
templateUrl: 'addlist.html'
})
export class AddListPage {
type: string;
description: string;
today: Date;
total: price;
constructor(public navCtrl: NavController, public view: ViewController) {
}
saveItem(){
let newItem = {
type: this.type,
today: this.today,
description: this.description,
total: this.total,
};
this.view.dismiss(newItem);
}
close(){
this.view.dismiss();
}
}
How do I calculate the total price for each time I add up new item? and display it on the footer? I uploaded the image.
Do I need to change from string to number values? Or stay it as string?

You can use a function that returns the total price, like this
private getTotalPrice() {
let totalPrice = 0;
for (let item of itens) {
totalPrice += Number.parseFloat(item.total);
}
return totalPrice;
}
and then u can call it in the footer
[(ngModel)]="getTotalPrice()"

Angular 2 Dynamic Template Directives does not work

I have a component which takes in a dynamic template which looks like this:
<ion-list>
<ion-item-sliding *ngFor="let entity of entityList" #item>
<ion-item (click)="navigateToDetail(entity.id)">
<template [ngTemplateOutlet]="template" [ngOutletContext]="{entity: entity}"></template>
</ion-item>
<ion-item-options side="right">
<button ion-button color="danger" *ngIf="config && config.canDelete" (click)="delete(entity.id)">
<ion-icon name="trash"></ion-icon>Delete
</button>
<button ion-button color="dark" >
<ion-icon name="more"></ion-icon>More
</button>
</ion-item-options>
</ion-item-sliding>
<ion-list-header>
<button *ngIf="config && config.canCreate" (click)="create()"
ion-button full color="secondary">
Create New<ion-icon name="add"></ion-icon>
</button>
</ion-list-header>
</ion-list>
and the typescript looks like so:
export class PageListBaseComponent<T extends IHasId> {
#Input() template: TemplateRef<any>;
#Input() detailPageType: any;
#Input() config: PageListConfiguration
#Input() set baseProvider(provider: ProviderBase<T>) {
provider.getList().subscribe(entities => {
this.entityList = entities;
console.log(entities);
});
}
public entityList: T[];
constructor(public navCtrl: NavController, public navParams: NavParams) {
console.log("ctor");
}
create() {
if (this.config && this.config.canCreate) {
//TODO: initialize entity
let entity = {}
this.navCtrl.push(this.detailPageType, { entity });
}
}
delete(id: number) {
console.log(id);
if(this.config && this.config.canDelete)
{
this.baseProvider.deleteById(id).subscribe(result => {
console.log(result);
});
}
}
navigateToDetail(id: number) {
this.navCtrl.push(this.detailPageType, { id })
}
}
And then I have a template that looks like so:
<template #myTemplate let-entity="entity">
<ion-item>
<ion-avatar item-left>
<img src="http://modexenergy.com/wp-content/themes/modex_wp/img/avatar.png">
</ion-avatar>
<h2>{{ entity.email }}</h2>
<ion-icon name="arrow-forward" item-right></ion-icon>
</ion-item>
</template>
My issue is the <ion-item> Right now I need to use it twice which I do not want to do, For some reason if i try and render the items dynamically they do not appear in the list, so I need to leave <ion-item> wrapping the template, that would be fine, except the directives don't respect there parent. Meaning if I use the item-left directive in a template, and the template does not include an <ion-item> my directives are ignored.
What can I do to fix this, if I can get away with out using both that would be nice, but if not is there a way render the first <ion-item> with no style?

Ionic2-array not updating on html side

I am new in Ionic2 and Angular2 trying to update my array at front side but its not updating.Moreover its updating perfectly at backend (ts),checked using console. need your help
My Component:
import { Component } from '#angular/core';
import { NavController, NavParams, ViewController } from 'ionic-angular';
#Component({
selector: 'page-modal-filter',
templateUrl: 'modal-filter.html'
})
export class ModalFilterPage {
public fil=[];
public BRANDNAME: any;
public srts:any;
constructor(public nav: NavController, public viewCtrl: ViewController, public navParams: NavParams) {
this.fil = [];
this.srts="ABCD";
if (navParams.get('tabName') == 'filter') {
let data = navParams.get('data');
data.map(d => {
for (let op in d.OPTIONGROUP) {
for (let x in d.OPTIONGROUP[op]) {
if (x != "UPC") {
if (!this.fil[x]) {
this.fil[x] = [];
}
if (this.fil[x].indexOf(d.OPTIONGROUP[op][x]) == -1) {
this.fil[x].push(d.OPTIONGROUP[op][x]);
}
}
}
}
})
console.log(this.fil);
}
}
closeModal() {
// this.nav.pop();
this.viewCtrl.dismiss(true);
}
}
"fil" array not showing on frontside of html but console show its perfectly.
My html code:
fil array not showing
<ion-header>
<ion-navbar color="primary">
<ion-buttons start>
<button ion-button (click)="closeModal()">
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons>
<ion-title>Search Result(105)</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding class="tab-filter">
<!--filter list-->
<pre>{{fil}}</pre>
<pre>{{srts}}</pre>
<ion-list class="list-no-border">
<ion-item>
<ion-label> PLACE</ion-label>
<ion-select>
<ion-option value="">All Regions</ion-option>
<ion-option value="vn">Vietnam</ion-option>
</ion-select>
</ion-item>
<ion-item class="price-ranger">
<ion-label>Price</ion-label>
<ion-input type="text" placeholder="Min"></ion-input>
-
<ion-input type="text" placeholder="Max"></ion-input>
</ion-item>
<ion-item>
<ion-label>Free shipping</ion-label>
<ion-toggle checked="false"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Once pice only</ion-label>
<ion-toggle checked="false"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Sale items</ion-label>
<ion-toggle checked="false"></ion-toggle>
</ion-item>
</ion-list>
</ion-content>
<!--Footer buttons-->
<ion-footer class="category">
<ion-toolbar position="bottom">
<ion-buttons end>
<button ion-button (click)="closeModal()">
CANCEL
</button>
<button ion-button (click)="closeModal()">
<span ion-text color="gray">APPLY</span>
</button>
</ion-buttons>
</ion-toolbar>
</ion-footer>

Your {{fil}} is an array yet you are declaring it on the view as a simple property. Angular does not automatically interpret an array with string interpolation.
For arrays you need to use *ngFor
So if you want like you have stated is being displayed in your console.log you could write something like
<div *ngFor="let item of fil">
<ion-item *ngFor="let color of item.COLOR">
{{color.propertyName}}
<ion-item>
<ion-item *ngFor="let size of item.SIZE">
{{color.propertyName}}
<ion-item>
</div>

I resolved my issue by using
this.fil = [];
to
this.fil={}

How can I use a ngModel on an ion-radio element?

I'm trying to implement a ngModel on a ion-radio element but somehow it doesn't work. This is my code:
import {
Page
} from 'ionic-angular';
#Page({
templateUrl: 'build/pages/settings/settings.html'
})
export class Settings {
constructor() {
this.unit = 2;
}
}
<ion-list radio-group>
<ion-list-header>
Unit
</ion-list-header>
<ion-item>
<ion-label>Metric (kg)</ion-label>
<ion-radio value="1" [(ngModel)]="unit"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Imperial (lbs)</ion-label>
<ion-radio value="2" [(ngModel)]="unit"></ion-radio>
</ion-item>
</ion-list>
I've tried implementing it on a ion-input and ion-select and that just works fine. I also tried adding directives: [FORM_DIRECTIVES] to my #Page and added the corresponding import but that doesn't fix the problem.
Any ideas?

Syntax has been changed rewritten now, ngModel should be place with ion-list & radio-group only once. No need to have them there on each ion-radio element.
<ion-list radio-group [(ngModel)]="unit">
<ion-list-header>
Unit
</ion-list-header>
<ion-item>
<ion-label>Metric (kg)</ion-label>
<ion-radio value="1"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Imperial (lbs)</ion-label>
<ion-radio value="2" ></ion-radio>
</ion-item>
</ion-list>
For more information you could visit ionic2 framework forum link

It's working with Ionic 5.
<ion-radio-group value="answer">
<ion-item *ngFor="let item of question?.answers">
<ion-label> {{item.answer}} {{answer}}</ion-label>
<ion-radio slot="start" color="tertiary" value="{{item.id}}
(ionBlur)="saveAnswer(item.id)">
</ion-radio>
</ion-item>
</ion-radio-group>

As of Ionic 4+, the correct sintax is:
<ion-list>
<ion-radio-group [(ngModel)]="unit">
<ion-list-header>
Unit
</ion-list-header>
<ion-item>
<ion-label>Metric (kg)</ion-label>
<ion-radio value="1"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Imperial (lbs)</ion-label>
<ion-radio value="2"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>

You have to update below code too in Ionic 5.
this.unit = 2;
to
this.unit = '2';
In a word, you can't use integer variable as ion-radio value.
If you are going to use integer type of unit, please reference follow code.
this.options = [
{
label: 'Metric (kg)',
value: 1
},
{
label: 'Imperial (lbs)',
value: 2
}
];
in .html code
<ion-radio-group [(ngModel)]="unit">
<ion-list-header>
<ion-label>
Unit
</ion-label>
</ion-list-header>
<ion-item *ngFor="let opt of options">
<ion-label>{{opt.label}}</ion-label>
<ion-radio [value]="opt.value" slot="start"></ion-radio>
</ion-item>
</ion-radio-group>

This is what works for ionic 5..tested and working fine
<ion-list>
<ion-radio-group >
<ion-list-header>
<ion-label>{{'Drivers' | translate}}</ion-label>
</ion-list-header>
<ion-item *ngFor="let item of drivers" lines="none" (ionChange)="checkValue(item)">
<ion-avatar slot="start">
<img [src]="item.coverImage" />
</ion-avatar>
<ion-label>{{item.fullname}} <br>
<p>{{'Distance' | translate}} : {{item.distance}}Km</p>
</ion-label>
<ion-radio [value]="item.id"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
Then in your controller u can pick it like this
checkValue(value){
console.log("returned", value);
}

This is working for me
postData={
"gender":''
}
<ion-list>
<ion-radio-group value="Male" >
<ion-list-header>
<ion-label style="font-size:10px;">Gender</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Male</ion-label>
<ion-radio slot="start" value="Male" (ionBlur)="postData.gender='Male'"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Female</ion-label>
<ion-radio slot="start" value="Female" (ionBlur)="postData.gender='Female'"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>

This worked for me on Ionic 5
<ion-radio-group name="iconSelect" ngDefaultControl [(ngModel)]="playerIcon" (ionChange)="setIcon()">
<ion-list-header>
</ion-list-header>
<ion-item>
<ion-label>
<ion-icon name="radio-button-off"></ion-icon>
Circle
</ion-label>
<ion-radio value="1" ></ion-radio>
</ion-item>
<ion-item>
<ion-label>
<ion-icon name="square-outline"></ion-icon>
Square
</ion-label>
<ion-radio value="2"></ion-radio>
</ion-item>
<ion-item>
<ion-label>
<ion-icon name="play"></ion-icon>
Triangle
</ion-label>
<ion-radio value="3" ></ion-radio>
</ion-item>
</ion-radio-group>