Develop Reference

button does not show up when navigating

Hi There I have a code for a working back button but it requires adding in a constructor but I already have one can someone suggest how to fix the issue here my code below. I have a Constuctor already that is for my navigating pages, but its not working to have both in at the same time. trying to fix the issue by having them separated by comas but not working. I also need more words to write here for stack overflow im sorry
Thanks
Adam
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/router';
import { RegformPage } from 'src/app/regform/regform.page';
import { CreditcardPage } from 'src/app/creditcard/creditcard.page';
import {IonRouterOutlet} from '#ionic/angular';
#Component({
selector: 'app-forms',
templateUrl: './forms.page.html',
styleUrls: ['./forms.page.scss'],
})
export class FormsPage implements OnInit {
canGoBack: boolean = false;
constructor(private router: Router,routerOutlet: IonRouterOutlet) { }
ngOnInit() {
this.canGoBack = this.routerOutlet &&
this.routerOutlet.canGoBack();
}
regform(){
this.router.navigate(['/regform']);
}
ccform(){
this.router.navigate(['creditcard']);
}
}
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button *ngIf="canGoBack"></ion-back-button>
</ion-buttons>
<ion-title align="center">Forms</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card>
<ion-card-header>
<ion-card-title align="center">Registration Form</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-button align="center" (click)="regform()" color="primary">Get Started</ion-button>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-header>
<ion-card-title align="center">Credit Card Form</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-button align="center" (click)="ccform()" color="primary">Get Started</ion-button>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-header>
<ion-card-title align="center">Equipment Rental Form</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-button align="center"class="reg" color="primary">Get Started</ion-button>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-header>
<ion-card-title align="center">Field Trip Form</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-button align="center"class="reg" color="primary">Get Started</ion-button>
</ion-card-content>
</ion-card>

ion-back-button Documentation says:
"It is smart enough to know what to render based on the mode and when
to show based on the navigation stack."
You don't need to do that manually. Simply put ion-back-button in your template and it should hide itself when the navigation stack has only 1 page.
Doing it manually:
If the "smart" enough ion-back-button doesn't hide itself automatically, then as a last resot, add the following css to global.scss file.
ion-back-button {
display: none;
}
.can-go-back {
ion-back-button {
display: block !important;
}
}
Ionic framework adds .can-go-back class to the ion-back-button based on the navigation stack.

Ionic4+VueJS hamburger menu

Question: How can I create a swipable side menu for an ionic v4 vuejs app?
So I'm new to ionic and have been trying to migrate an existing web app to ionic. Following the steps on the limited articles up on ionic4 with vue. I installed #ionic/core, added the CDN to the index file, and the ignore flag for [/ion/] web compoenets right before mounting Vue.
I'm currently getting this error: Menu: must have a "content" element to listen for drag events on.
I'm a bit unsure of what to follow as many of the articles out there are on ion v2 and v3, I know there were a few changed made to how the ui-components and based on ionic4 beta docs what I have seems to be correct:'
<script lang="ts" src="./Layout.ts"></script>
<template>
<div class="layoutComponent">
<ion-page>
<ion-menu>
<ion-header>
<ion-toolbar color="primary">
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-list-header>
Navigate
</ion-list-header>
<ion-item>
<router-link :to="{name: 'link 1'}">
<ion-label full>
<eg-localizer token="1"></localizer>
</ion-label>
</router-link>
</ion-item>
<ion-item>
<router-link :to="{ name: 'link2'}">
<ion-label full>
<localizer token="2"></localizer>
</ion-label>
</router-link>
</ion-item>
<ion-item>
<a target="_blank" href="https://foo.com">
<ion-label full>
<localizer token="external link 3"></localizer>
</ion-label>
</a>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<!-- main point of entry for app content -->
<slot></slot>
</ion-page>
</div>
</template>

The documentation on ionic framework it's a bit unclear or incomplete, but I was able to make the menu working:
<template>
<ion-menu side="start" content-id="menu-content">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Start Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content id="menu-content">
<ion-list lines="full">
<ion-item v-for="item in items" :key="item.name">
<ion-icon :name="item.icon" slot="start"></ion-icon>
<ion-label>{{ item.name }}</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
</template>
<script>
export default {
data () {
return {
items: [
{ name: 'Home', icon: 'home', href: 'home' },
{ name: 'About', icon: 'information-circle', href: 'about' },
{ name: 'Articles', icon: 'list-box', href: 'articles' },
{ name: 'Log out', icon: 'logout', href: 'logout' }
]
}
}
}
</script>
The key is here:
<ion-menu side="start" content-id="menu-content">
and here
<ion-content id="menu-content">
Hope this helps anyone.

For Ionic 6 + Vue js 3.0 make sure you have your component <ion-router-outlet /> inside a <ion-content>, and that ion-content should have the id you have specified in content-id parameter for the menu.
<ion-content id="main">
<ion-router-outlet />
</ion-content>

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={}