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
Related
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>
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
these are my stencil and ionic version
"dependencies": {
"#ionic/core": "one"
},
"devDependencies": {
"#stencil/core": "1.0.0-beta.8"
}
I'm trying to use the <ion-menu> inside a <ion-split-pane> like in a ionic app, this is my code (this is the original repo of this code https://github.com/modemlooper/stencil-pwa-sidemenu ):
app-root.tsx
[...]
render() {
return (
<ion-app>
<ion-router useHash={false}>
<ion-route url="/" component="app-home" />
<ion-route url="/profile/:name" component="app-profile" />
</ion-router>
<ion-split-pane when="lg">
<ion-menu side="start">
<ion-header>
<ion-toolbar color="primary" />
</ion-header>
<ion-content forceOverscroll={false}>
<ion-list>
<ion-menu-toggle autoHide={false}>
<ion-item href="/">
<ion-icon slot="start" name="home" />
<ion-label>Home</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle autoHide={false}>
<ion-item href="/profile/piero">
<ion-icon slot="start" name="person" />
<ion-label>Profile</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav main />
</ion-split-pane>
</ion-app>
);
}
[...]
The problem is that <ion-nav main /> gives me this error:
And without "main" the split pane don't work properly
This is the expected behaviour
How is it possible to fix this? I don't get how to use properly the ion menu inside a split pane...
Thank you so much
I have the split-pane working in an app. There are a couple differences with your implementation:
ion-nav is wrapped in an ion-content element with an ID attribute
The ion-contents ID is referenced in ion-split-pane[contentId] and ion-menu[contentId]
<ion-split-pane contentId="main-content">
<ion-menu contentId="main-content">
...
</ion-menu>
<ion-content id="main-content">
<ion-nav />
</ion-content>
</ion-split-pane>
I looked at: https://ionicframework.com/docs/api/config/Config/
This page used an example where the tabsPlacement on ion-tabs was changed for that one element.
I tried to recreate this with:
<ion-header>
<ion-navbar backButtonIcon="close">
<ion-title>settings-edit</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
There doesn't seem to be any changes with the navBar back button
There is no custom back button option in ionic simply change it as the button
<ion-header>
<ion-navbar hideBackButton="true">
<button ion-button menuToggle hideBackButton="true">
<ion-icon name="md-close" (click)="close()" ></ion-icon>
</button>
<ion-title>settings-edit</ion-title>
</ion-navbar>
</ion-header>
Try This Code and add below TS code in your page
close()
{
this.navctrl.pop();
}
As in the documentation, you should define it it in your app.module.ts
Add this to your #NgModule:
imports: [
BrowserModule,
IonicModule.forRoot(MyApp, {
backButtonIcon: 'close',
iconMode: 'ios',
modalEnter: 'modal-slide-in',
modalLeave: 'modal-slide-out',
tabsPlacement: 'bottom',
pageTransition: 'ios-transition'
})
]
I am building a tabbed application in Ionic 2 which has five tabs one being the home page. The tabs work fine. I am trying to add a menu for each tab page other than the home page. I have duplicated and added the code below for each of the 4 pages in the home page just changing the menu id;s and the content id's. Everything works fine for the first page I access the subsequent pages I access just don't do anything. I thought this would be quite simple but already have spent days looking for a solution. The docs just refer to different menus on one page not different menus on several pages. Newbie so guess its simple. Help please.
<ion-header>
<ion-navbar color="dark">
<button ion-button menuToggle="menujoinus">
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>JOIN US</ion-title>
</ion-navbar>
</ion-header>
<ion-menu [content]="joinuscontent" id="menujoinus">
<ion-content>
<ion-list>
<button ion-button block icon-right color="secondary" menuClose="menujoinus">Close
<ion-icon name="close"></ion-icon>
</button>
<button ion-item icon-left (click)="openPageFieldguides()">
<ion-icon name="compass"></ion-icon>
Field Guides
</button>
<button ion-item icon-left (click)="openPageVolunteers()">
<ion-icon name="clipboard"></ion-icon>
Volunteers
</button>
<button ion-item icon-left (click)="openPageOwner()">
<ion-icon name="key"></ion-icon>
Owners
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #joinuscontent [root]="rootPage"></ion-nav>
It's a bit confusing but you need to add all the menus to the app component - not any of the sub pages - and then reference whichever you need from the sub page using the MenuController. In some cases you may need to disable/enable menus on the sub page but depends on the situation. Take a look at http://ionicframework.com/docs/api/components/app/MenuController/ and the "Multiple Menus on the Same Side" and "Multiple Menus on Different Sides" for more information.
An example:
<!-- Menu 1 -->
<ion-menu id="menu-one" [content]="nav">
<ion-header>
<ion-navbar>
<ion-title>Menu 1</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item (click)="doSomething()" menuClose>
Item 1
</ion-item>
<ion-item (click)="doSomething()" menuClose>
Item 2
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<!-- Menu 2 -->
<ion-menu id="menu-two" [content]="nav">
<ion-header>
<ion-navbar>
<ion-title>Menu 2</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item (click)="doSomething()" menuClose>
Item 1
</ion-item>
<ion-item (click)="doSomething()" menuClose>
Item 2
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #nav [root]="rootPage"></ion-nav>
And on the sub page:
import { Component } from '#angular/core';
import { MenuController } from 'ionic-angular';
#Component({
selector: 'sub-page',
templateUrl: 'sub-page.html'
})
export class SubPage {
constructor(public menuCtrl: MenuController) {
// menuCtrl.enable(false, 'menu-one');
menuCtrl.enable(true, 'menu-two');
}
toggleMenu() {
this.menuCtrl.toggle();
}
}
The gotcha is the doSomething() method needs to be on the app component, not the sub page component.