Ionic menu for logged pages is not appearing - ionic-framework

I want to show a menu template on ionic app but i want first of all a login page and then, when the user is logged, show the ionic template.
Now i have in app.routing.module that if the user is not logged, the app redirects to the loginPage and if the user is logged, redirects to pages routing module where there are many pages like the home page '' = '/home':
App.routing.module
const routes: Routes = [
{ path: '',
loadChildren: () => import('./pages/pages.module').then( m => m.PagesPageModule),
...canActivate(redirectUnauthorizedToLogin)
},
{
path: 'login',
loadChildren: () => import('./pages/login/login.module').then(m => m.LoginPageModule),
...canActivate(redirectLoggedInToHome)
},
];
pages-routing.module.ts
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{
path: 'home',
loadChildren: () => import('./home/home.module').then(m => m.HomePageModule),
...canActivate(redirectUnauthorizedToLogin)
},
{
path: 'appointments',
loadChildren: () => import('./appointments/appointments.module').then(m => m.AppointmentsPageModule),
...canActivate(redirectUnauthorizedToLogin)
},
{
path: 'customers',
loadChildren: () => import('./customers/customers.module').then(m => m.CustomersPageModule),
...canActivate(redirectUnauthorizedToLogin)
},
];
The app.component:
<ion-app>
<!-- Content -->
<ion-router-outlet id="app"></ion-router-outlet>
<!-- !Content -->
</ion-app>
The login page:
<div class="login">
<ion-card>
<ion-card-content>
<form [formGroup]="loginForm" (ngSubmit)="login()">
<!-- Email -->
<app-base-input label="email.label" [control]="email" errorMessage="email.notValid" formControlName="email">
</app-base-input>
<!-- Password -->
<app-base-input type="password" label="password.label" [control]="password" errorMessage="password.notValid"
formControlName="password"></app-base-input>
<!-- Button -->
<ion-button expand="full" type="submit">{{ 'login.label' | translate }}</ion-button>
</form>
</ion-card-content>
</ion-card>
</div>
Im including the menu on pagePage.component.html that has the pages inside but is not showing the menu.
<!-- Menu -->
<ion-menu contentId="main-content" type="overlay">
<ion-content>
<ion-list id="inbox-list">
<ion-list-header>{{ 'appName' | translate }}</ion-list-header>
<ion-note>hi#ionicframework.com</ion-note>
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
<ion-item routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" routerLinkActive="selected">
<ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-outline'"></ion-icon>
<ion-label>{{ p.title | translate }}</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<!-- !Menu -->
<ion-router-outlet id="main-content"></ion-router-outlet>
How can i add a menu in logged pages?

I'm not really sure what your goal is, but if you just want to show an ion-menu, then you just add it at the next page after the login.
This is an example:
<ion-menu side="start" menuId="first" contentId="main">
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-menu-button autoHide="true"></ion-menu-button>
</ion-buttons>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-button routerLink="/appointment" fill="clear">Appointments</ion-button>
</ion-item>
<ion-item>
<ion-button routerLink="/customer" fill="clear">Customer</ion-button>
</ion-item>
</ion-list>
</ion-content>
<ion-footer>
<ion-item>
<ion-button fill="clear" (click)="signOut()">Abmelden</ion-button>
</ion-item>
</ion-footer>
</ion-menu>
It's between
<ion-header></ion-header>
//ion-menu here!
<ion-content></ion-content>
If you like to display a menu in your login page then do it with an *ngIf.
userlogin: Boolean = false
Do your login and set userlogin to true.

Related

I'm not able to display my page with the help of ion-menu and not able to click the item

ion-menu is not working
This is my sidemenu.component.html
<ion-split-pane contentId="menu-content" when="xs">
<ion-menu contentId="menu-content" >
<ion-content>
<ion-item *ngIf="tabSelec == 'lead'" lines="none" routerLink="/hometab/lead
routerDirection="root" routerLinkActive="active-link">
<ion-icon src="assets/imgs/leadsSelec.svg"></ion-icon>
<ion-label> Leads </ion-label>
</ion-item>
<ion-item *ngIf="tabSelec != 'lead'" lines="none" routerLink="/hometab/lead
routerDirection="root" routerLinkActive="active-link">
<ion-icon src="assets/imgs/sitesSelec.svg"></ion-icon>
<ion-label>Leads</ion-label>
</ion-item>
<ion-item *ngIf="tabSelec == 'sites'" lines="none" routerLink="/hometab/sites
[queryParams]="{pri: 'leads', sec: true}" routerDirection="root"
routerLinkActive="active-link">
<ion-icon class="img" src="assets/imgs/sitesSelec.svg"></ion-icon>
<ion-label > Sites </ion-label>
</ion-item>
<ion-item *ngIf="tabSelec != 'sites'" lines="none" routerLink="/hometab/sites
[queryParams]="{pri: 'leads', sec: true}" routerDirection="root"
routerLinkActive="active-link">
<ion-icon class="img" src="assets/imgs/sitesSelec.svg"></ion-icon>
<ion-label> Sites </ion-label>
</ion-item>
</ion-content>
</ion-menu>
<ion-router-outlet id="menu-content"></ion-router-outlet>
</ion-split-pane>
This is my hometab-rotuing.module.ts
{
path:'',
redirectTo: '/hometab/lead.module',
pathMatch: 'full'
},
{
path:'',
component: HometabPage,
children :[
{
path: 'lead',
loadChildren: () => import('../lead/lead.module').then(m => m.LeadPageModule)
},
{
path: 'sites',
loadChildren: () => import('../sites/sites.module').then(m => m.SitesPageModule)
},
{
path: 'testing',
loadChildren: () => import('../testing/testing.module').then(m => m.TestingPageModule)
},
]
},
Any idea how does it suppose to work? It should automatically redirect me to the lead page after login
Also I'm not able to click on my ion-item, any help appreciated
You have to provide <ion-menu> tag with the contentId attribute, which represent the id of the container to show when you navigate with the sidemu.
Example:
<ion-menu contentId="your-main-content-id" side="start">...</ion-menu>
...
//you can use any order valid html container tag
<ion-content id="your-main-content-id">...</ion-content>

Stencil: <ion-nav> inside <ion-pane-split> don't work properly

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>

Side-menu auto open loading time issue in ionic

I use ion-menu component in my app. I change it based route. so I modified that. For ex is below.
My issue is first time menu clicked & the app load next that menu
related view time the side menu was close correctly but reopened next few second.
My approutemodule.ts
[{
path: '',
canActivate: [AuthGuard],
component: SideMenuComponent,
children: [{
path: '',
redirectTo: 'dashboard',
pathMatch: 'full'
}, {
path: 'dashboard',
loadChildren: './pages/dashboard/dashboard.module#DashboardPageModule'
}, {
path: 'tabs-view',
loadChildren: './layouts/footer-tabs/footer-tabs.module#FooterTabsPageModule'
}]
}, {
path: 'login',
loadChildren: './pages/login/login.module#LoginPageModule'
}];
My appcomponent.html
<ion-app>
<ion-router-outlet></ion-router-outlet>
</ion-app>
My sidemenucomponent.html
<ion-split-pane>
<ion-menu id="app-side-manu" #sideMenu>
<ion-header class="user-img">
<ion-toolbar>
<ion-avatar>
<img *ngIf="userImg" [src]="userImg" alt="user-img" />
</ion-avatar>
<div>
<h2>{{userName}}</h2>
<p>{{userLoc}}</p>
</div>
</ion-toolbar>
</ion-header>
<ion-content class="side-menu">
<ion-list>
<ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
<ion-item lines="none" class="link-hover" routerDirection="root" [routerLink]="p.url">
<ion-thumbnail slot="start">
<ion-img [src]="p.icon"></ion-img>
</ion-thumbnail>
<ion-label>
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle auto-hide="false" >
<ion-item lines="none" class="link-hover" (click)="globalHelper.logout()">
<ion-thumbnail slot="start">
<ion-img src="/assets/images/logout.png"></ion-img>
</ion-thumbnail>
<ion-label>Logout</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-split-pane>
Use side-menu component selector in your app component html file.
For Ex:
<ion-app>
<app-sidemenu-component></app-sidemenu-component>
</ion-app>
If you want side-menu show hide different screen. It's possible.
For Ex:
home screen is need to side-menu
// first import MenuController in your home screen
import { MenuController } from '#ionic/angular';
// Next add that constructor to assign private variable menuCtrl
constructor(private menuCtrl: MenuController){}
// then use it ionViewWillEnter method inside
ionViewWillEnter() {
this.menuCtrl.enable(true);
}
login screen is no need to side-menu
ionViewWillEnter() {
this.menuCtrl.enable(false);
}

refresh app.components in ionic 3

i want refresh app.component because in my sidemenu there is image and name so i store name and image in local storage but when i login and go to dashboard my app.component not refresh so need refresh app.components
My menu file
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="profile">
<img class="profile-picture" src="assets/imgs/user_profile.png" />
<h3 class="name">{{name}}</h3>
</div>
<ion-list class="bg-color-menu" no-lines>
<ion-item menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
<ion-item>
<ion-avatar item-start>
<img [src]="p.icon" />
</ion-avatar>
{{p.title}}
</ion-item>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
app.components
name:any;
this.name = localStorage.getItem("name");
Make your user data as BehaviorSubject.
Add a service - user.service.ts
export class UserService {
private currentUserSub = new BehaviorSubject<User>(null);
constructor(
private http: HttpClient
) {
const user = JSON.parse(localStorage.getItem('user'));
this.currentUserSub.next(user);
}
login(loginData): Observable<User> {
return this.http.post('login', loginData)
.map((res: any) => res.data)
.do((user: User) => {
localStorage.setItem('user', JSON.stringify(user));
this.currentUserSub.next(user);
});
}
getCurrentUserDetails(): Observable<User> {
const user = JSON.parse(localStorage.getItem('user'));
this.currentUserSub.next(user);
return this.currentUserSub;
}
}
call getCurrentUserDetails in app.component.ts to get the current user data
getUserDetails() {
this.userService.getCurrentUserDetails().subscribe(res => {
this.userProfile = res;
});
}
In app.html
<div class="profile">
<img class="profile-picture" src="userProfile.imgUrl" />
<h3 class="name">{{userProfile.name}}</h3>
</div>
this is an example. Do it as per your requirement.

Ion nav view not working properly

So In the Ionic I am using ui-router with nav view but it doesn't seem to work properly:
app.js
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/home.html'
})
.state('app.book', {
url: '/book',
views: {
'menuContent': {
templateUrl: 'templates/book.html'
}
}
})
.state('app.service', {
url: '/service',
views: {
'menuContent': {
templateUrl: 'templates/service.html',
controller: 'ServiceController'
}
}
})
$urlRouterProvider.otherwise('/app/book');
home.html:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-header-bar align-title="left" class="bar-positive">
<button class="button icon-left ion-navicon-round button-clear " menu-toggle="left"> </button>
<h1 class="title">Maalish</h1>
</ion-header-bar>
<ion-nav-view name="menuContent"></ion-nav-view>//Nav View
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-content>
<ion-list>
<ion-item item-icon-left menu-close href="#/app/splash">
<i class="icon ion-home"></i>
&nbsp Home
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Book.html
<ion-view view-title="book">
<ion-content class="book-content">
Hi
Click
</ion-content>
</ion-view>
Service.html:
<ion-view view-title="service">
<ion-content class="book-content">
Hey
</ion-content>
</ion-view>
So here is the small description:
Home.html-It has the sidemenu required on all the pages/screens its the parent screen
Book.html:Its the deafault and first screen link to service.html
Service.html:Its the second screen.
Problem:
So when I open the app the book.html opens and it has the sidemenu(home.html) but when i click on the link service.html The page opens but it doesnt have sidemenu.If i refresh the link of service.html only then the sidemenu opens.
Sidemenu doesn't appear when redirected from book.html
Solved It you just have to change to I.e change true to false