My app has a tab page:
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="home">
<ion-icon name="search-outline"></ion-icon>
<ion-label>Cerca</ion-label>
</ion-tab-button>
<ion-tab-button tab="inserimento">
<ion-icon name="add-circle-outline"></ion-icon>
<ion-label>Inserisci</ion-label>
</ion-tab-button>
<ion-tab-button tab="servizi">
<ion-icon name="shield-checkmark-outline"></ion-icon>
<ion-label>Servizi</ion-label>
</ion-tab-button>
<ion-tab-button *ngIf="this.messagginonletti == 0" tab="messaggi">
<ion-icon name="mail-outline"></ion-icon>
<ion-label>Messaggi</ion-label>
</ion-tab-button>
<ion-tab-button *ngIf="this.messagginonletti > 0" tab="messaggi">
<ion-icon name="mail-unread-outline"></ion-icon>
<ion-label>Messaggi</ion-label>
</ion-tab-button>
<ion-tab-button tab="account">
<ion-icon name="person-circle-outline"></ion-icon>
<ion-label>Account</ion-label>
</ion-tab-button>
where "messaggi" tab has 2 different values, one if this.messagginonletti variabile is 0 and another one if this.messagginonletti is > 0.
How can i refresh tab menu to update messagginonletti value? I retrieve this value using a function:
retrieveMessages() {
return new Promise((resolve =>{
this.accsPrvds.postData(‘test.php').subscribe((res:any)=>{
//console.log(res);
this.messagginonletti = res.success;
});
}));
}
the value of tab menu is set when app starts, but I don't know how to update (refresh) it
I don't know why it doesn't update, it should. You probably need to use ngZone where you are updating the data. But seems like the only thing that you change when this.messagginonletti changes is the icon of the tab. I wouldn't recommend changing the tab structure, only changing the icon here would suffice (or everything else that you want to change). so here is your fix:
<ion-tab-button tab="messaggi">
<ion-icon *ngIf="this.messagginonletti > 0" name="mail-unread-outline"></ion-icon>
<ion-icon *ngIf="this.messagginonletti == 0" name="mail-outline"></ion-icon>
<ion-label>Messaggi</ion-label>
</ion-tab-button>
How do you automatically add a query parameter when clicking a tab using ion-tabs in Ionic?
As an example, consider three tabs:
<ion-tabs>
<ion-tab-bar slot="top">
<ion-tab-button tab="tab1">
<ion-label>Tab1</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-label>Tab2</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab3">
<ion-label>Tab3</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
If I click Tab1, I want to automatically navigate to /tabs/tab1?foo=bar instead of /tabs/tab1 (idem for the other tabs, note that the query parameter value will be dynamic in practice). What is a good, concise way of doing this?
You can simply add ?foo=bar after the tab1, or you can set a variable to it (see tab2), or you can even set conditions (see tab3)
<ion-tabs>
<ion-tab-bar slot="top">
<ion-tab-button tab="tab1?foo=bar">
<ion-label>Tab1</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2?foo={{myCustomVariable}}">
<ion-label>Tab2</ion-label>
</ion-tab-button>
<ion-tab-button [tab]="myCustomCondition === true? 'tab3?foo=bar' : 'tab3'">
<ion-label>Tab3</ion-label>
</ion-tab-button>
<ion-tab-button tab="{{getTabRoute(4)}}">
<ion-label>Tab4</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
getTabRoute(index: number): string {
if(this.conditionToAddQuryParams === true){
return 'tab' + index + '?' + this.myQueryParams;
} else {
return 'tab' + index;
}
}
I have used ion-tabs and side-menu for change route the app, both uses routerLink. And when i press Home tab in ion-tab to go back to home page inside other pages, route changed to home but home page constructor method and onInit methods does not invoke.
side-menu.component.ts
<ion-app>
<ion-split-pane contentId="main-content">
<ion-menu *ngIf="isAuthenticated$ | async" contentId="main-content" type="overlay">
<ion-content>
<ion-list id="inbox-list">
<div class="menu-header">
<ion-list-header>
<img src="assets/wa-logo.ico">
</ion-list-header>
<ion-note></ion-note>
</div>
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
<ion-item (click)="selectedIndex = i" routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" [class.selected]="selectedIndex == i">
<ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
<ion-label>{{ p.title }}</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
<ion-footer>
<ion-menu-toggle auto-hide="false">
<ion-item
(click)="logout()"
routerDirection="root"
lines="none"
detail="true"
>
<ion-icon
slot="start"
ios='log-out-outline'
md="log-out-sharp"
></ion-icon>
<ion-label> Logout </ion-label>
</ion-item>
</ion-menu-toggle>
</ion-footer>
</ion-menu>
<ion-router-outlet id="main-content"></ion-router-outlet>
<ion-tabs *ngIf="isAuthenticated$ | async">
<ion-tab-bar [translucent]="true" slot="fixed">
<ion-tab-button (click)="onClick()">
<ion-icon name="home"></ion-icon>
<ion-label> Home </ion-label>
</ion-tab-button>
<ion-tab-button [routerLink]="['/features/new-request']">
<ion-icon name="document-text"></ion-icon>
<ion-label> New Request </ion-label>
</ion-tab-button>
<ion-tab-button [routerLink]="['/features/prev-requests']">
<ion-icon name="reader"></ion-icon>
<ion-label> All Requests </ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-split-pane>
</ion-app>
So if i go inside prev-request page using ion-tab and once using hardware back button or ion-toolbar back button to changes route back to home page constructor and ngOnInit does not invoke, but if i route using side menu and go back with hardware back button or ion-toolbar back button constructor and ngOnInit methods are invoked.
prev-req.page
constructor(private _preReqService: PrevReqService,private platform: Platform,
private _modal: ModalService,
private _router: Router) {
this.platform.backButton.subscribeWithPriority(10, () => {
this._router.navigate(['/features/home'])
});
}
Still i don't have any clue why this happens.
Any idea why this happens ?
If you want to execute a function every time you go to a page Use Ionic Page Life Cycle.
ionViewWillEnter: Fired when the component routing to is about to animate into view.
ionViewDidEnter: Fired when the component routing to has finished animating.
ionViewWillLeave: Fired when the component routing from is about to animate.
ionViewDidLeave: Fired when the component routing to has finished animating.
export class ExamplePage implements OnInit {
constructor(){
}
ionViewWillEnter(){
console.log('Will Enter Fired') // will fire every time to go to a page.
}
}
Ionic Life Cycle Docs
I used ionic-vue with ionicons 5.0.1 but after call
<ion-icon name="add"></ion-icon>
i was following https://dev.to/aaronksaunders/build-your-first-ionic-vue-app-18kj and https://github.com/ionic-team/ionic/issues/19078 tutorial, but stucked and icon in FAB cannot be show.
This is my syntax, thank you for helping.
<template>
<ion-page>
....
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button #click="$router.push({ name: 'new-item' })">
<ion-icon name="add"></ion-icon>
</ion-fab-button>
</ion-fab>
</ion-content>
</ion-page>
</template>
<script>
...
import { addIcons } from 'ionicons';
import * as allIcons from 'ionicons/icons';
const currentIcons = Object.keys(allIcons).map(i => {
const key = i.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`)
if(typeof allIcons[i] === 'string') {
return {
[key]: allIcons[i],
}
}
return {
['ios-' + key]: allIcons[i].ios,
['md-' + key]: allIcons[i].md,
};
});
const iconsObject = Object.assign({}, ...currentIcons);
addIcons(iconsObject);
...
</script>
Result FAB does not show icon 'add':
For Ionic Vue 3 using Composition API:
<template>
<ion-icon :icon="rocket" />
</template>
<script>
import { IonIcon } from '#ionic/vue';
import { rocket } from 'ionicons/icons';
export default {
components: { IonIcon },
setup() {
return {
rocket
}
}
}
</script>
For <script setup>
<script setup>
import { IonIcon } from '#ionic/vue';
import { rocket } from 'ionicons/icons';
</script>
<template>
<ion-icon :icon="rocket" />
</template>
I was also following the same guide(https://dev.to/devmount/how-to-use-ionicons-v5-with-vue-js-53g2), and I encountered the same issue.
I decided to downgrade the ionicons version to version 4:
npm i ionicons#4
This solved my issue.
The code that I used from the guide:
<template>
<ion-page>
<ion-header>
<ion-toolbar color="primary">
<ion-title>Home</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item>
<ion-checkbox slot="start"></ion-checkbox>
<ion-label>
<h1>Create Ideaa</h1>
<ion-note>Run Idea by Brandy</ion-note>
</ion-label>
<ion-badge color="success" slot="end">5 Days</ion-badge>
</ion-item>
</ion-list>
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button >
<ion-icon name="add" ></ion-icon>
</ion-fab-button>
</ion-fab>
</ion-content>
</ion-page>
</template>
<script>
import { add } from "ionicons/icons";
import { addIcons } from "ionicons";
addIcons({
"ios-add": add.ios,
"md-add": add.md
});
export default {
name: "HomePage",
props: {
msg: String
}
};
</script>
In your main.js file
import * as allIcons from "ionicons/icons";
Vue.mixin({
data() {
return {
i: allIcons,
};
},
methods: {
icon(name) {
return this.i[name];
}
}
});
now you can use <ion-icon :src="icon('search')"></ion-icon> anywhere in the vue application, it is going to work
hey thanks for checking out the blogs and videos...
you can also get the icons this way...
<template>
<ion-button #click="handleAddItemClicked" >
<ion-icon slot="icon-only" :src="i.saveOutline" ></ion-icon>
</ion-button>
<ion-button #click="handleAddItemClicked" >
<ion-icon slot="icon-only" :src="i.save" ></ion-icon>
</ion-button>
<ion-button #click="handleAddItemClicked" >
<ion-icon slot="icon-only" :src="i.saveSharp" ></ion-icon>
</ion-button>
</template>
<script>
import * as allIcons from "ionicons/icons";
...
data() {
return {
i : allIcons,
};
},
</script>
I followed this comment in a closed issue on #modus/ionic-vue repo: https://github.com/ModusCreateOrg/ionic-vue/issues/120#issuecomment-633666592
import { addIcons } from 'ionicons'
import { add, cartOutline } from 'ionicons/icons'
addIcons({ add, "cart-outline": cartOutline })
This worked with ionicons#5.1.2 installed. Note how the multi word icon imports are camel case instead of kebab case. If you want to use the kebab case variant of the name for an ion-icon you have to do the assignment to the kebab case name yourself like in the case of cart-outline above.
Though if you wanted to add all of them at once and support kebab case, you could map a new object like this:
import { addIcons } from 'ionicons'
import * as allIcons from 'ionicons/icons'
import _ from 'lodash'
addIcons(_.mapKeys(allIcons, (value, key) => _.kebabCase(key))
After i tried everything, there weren't any errors reported anywehere, just icon wasn't there.
Please check twice, that you have set the color of the icon, because in default icon style color is inhereit.
So, if you have for example, a green button, the color of the icon will be also green, if you do not specify.
I was using this tutorial https://alligator.io/ionic/ionic-4-tabs/ to create Routing for my Ionic Tabs, but unfortunately the displayed content is always hidden and can't be shown.
My home.page.html looks like this:
<ion-header>
<ion-tabs style="display: contents;">
<ion-tab-bar slot="top">
<ion-tab-button tab="popular">
<ion-label>SOme text</ion-label>
<ion-icon name="heart"></ion-icon>
<ion-badge>6</ion-badge>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-header>
I defined the routings inside a home-routing.module.ts:
const routes: Routes = [
{
path: 'tabs',
component: HomePage,
children:
[
{
path: 'popular',
children:
[
{
path: '',
loadChildren: '../popular/popular.module#PopularPageModule'
}
]
}
]
}
]
And my popular.page.module.html looks like this:
<ion-header>
<ion-toolbar color="primary">
<ion-title>Home</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>Hallo</h1>
</ion-content>
I excpected so the h1-Tag "Hallo", but unfortunately it doesn't show anything. The interesting thing indeed, is that the h1-Tag is shown in Developer-Tools in the Browser.
Any ideas?
This has caused me a head headache XD. you shouldnt be putting your tabs in your header. the taps component/element is generated at the level above the page, where as the header element is generated within the page so sticking the tabs in the header is causeing all sorts of crazyness.
I went through the tutorial and got it to display correctly
home.page.html -
<ion-tabs>
<ion-tab-bar slot="top" color="primary">
<ion-tab-button tab="tab1">
<ion-icon name="home"></ion-icon>
<ion-label>Home</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-label>SOme text</ion-label>
<ion-icon name="heart"></ion-icon>
<ion-badge>6</ion-badge>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
please comment for stuff you want me to add