Hi i am trying to add two child pages in parent page with two tabs in ionic 4 using below code but i was confused about not showing admin with two tabs,when i select tabs respective pages have to show but its directly showing child1 page
I wan wondering when i use its working fine please suggest me some one where did i do wrong?
admin.html
<ion-content padding>
<ion-row>
<ion-col col-4><button ion-button color="secondary" (click)="child1()">Child1</button></ion-col>
<ion-col col-4><button ion-button color="secondary" (click)="child2()">Child2</button></ion-col>
</ion-row>
<ion-router-outlet></ion-router-outlet>
</ion-content>
admin-router.module.ts
const routes: Routes = [
{
path: 'Admin',
component: AdminPage,
children: [
{ path: '',redirectTo: '/Admin/Child1',pathMatch: 'full'},
{ path: 'Child1', component: Child1Page },
{ path: 'Child2', component: Child2Page },
]
}
];
adminModule.ts
#NgModule({
imports: [
CommonModule,
IonicModule,
AdminRoutingModule
],
declarations: [
AdminPage,
Child1Page,
Child2Page
]
})
export class AdminModule {
}
Try to use angular router-outlet instead of ion-router-outlet
Related
I want to create a profile page that has an image with a button to switch the image.
That button goes to a “definitions page” and there is a group of avatars for the user to select and when the avatar is selected it appears in the profile page.
I already have the definitions page but I don't know how the information of the image selected goes to the profile page. I'm trying with NavigationExtras but seems it doesn't work.
import { Component, OnInit } from '#angular/core';
import { NavController } from '#ionic/angular';
import { Router, NavigationExtras } from '#angular/router';
#Component({
selector: 'app-defini',
templateUrl: './defini.page.html',
styleUrls: ['./defini.page.scss'],
})
export class DefiniPage{
selectArray = [
{
"image":"assets/imgs/avatar/badass.jpg",
"isSelected": false
},
{
"image":"assets/imgs/avatar/chld.jpg",
"isSelected": false
},
{
"image":'assets/imgs/avatar/man.jpg',
"isSelected": false
},
{
"image":'assets/imgs/avatar/panda.jpg',
"isSelected": false
},
{
"image":"assets/imgs/avatar/pguim.jpg",
"isSelected": false
},
{
"image":"assets/imgs/avatar/woman.jpg",
"isSelected": false
},
{
"image":"assets/imgs/avatar/pinguim.jpg",
"isSelected": false
}
];
constructor(public navCtrl: NavController, private router: Router) {
}
btnActivate(ind) {
for(let i=0;i<this.selectArray.length;i++){
this.selectArray[i].isSelected = false;
}
this.selectArray[ind].isSelected = true;
}
public verAvatar(image) {
let navigationExtras: NavigationExtras;
navigationExtras = {
state: {
avatar: this.selectArray[image]
}
};
this.router.navigate(['selectArray'], navigationExtras);
}
ion-button{
border-radius: 0%;
height:80px;
width: 80px;
padding: 0%;
}
h5{
margin-left: 12px;
}
.selected{
background-color:#fe00334f;
}
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="/tab3" text="Alterar Avatar"></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-text>
<h5>Selecione o seu Avatar</h5>
</ion-text>
<ion-grid >
<ion-row>
<ion-col >
<ion-button fill="clear" [ngClass]="{'selected':avatar.isSelected}" *ngFor="let avatar of selectArray;let i = index" (click)="btnActivate(i)" >
<img src="{{avatar.image}}">
</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
Remember that you are in Ionic framework. Do not use the angular router. Use the ionic controller.
NOTE: Without seeing your routing module definitions, I am simply presuming that 'selectArray' is the correct path. This could also be why your app is not working. Run your app in browser and look for errors from console.log.
this.navController.navigateForward('selectArray', navigationExtras);
Maybe you can try with passing data with the use of a modal to choose the avatar. Or you can create a service with all your profiles data (avatars included) and modify it there. Services are really good if you'll need those data in multiples places in your app, not only your profile page.
There is a lot of tutorial for service in ionic or passing data between page or modal.
I created a modal component but it only renders the content well when opening it the first time. Subsequent openings the modal does not render the content correctly. The header can be hidden, font color is changed, all content can be hidden e.t.c.
I have declared it in the module that opens it and added it in entrycomponents.
Can it be that the css is not loaded correctly.
I'm using ionic 5.6.5 and angular 11.
module containg the modal component
#NgModule({
declarations: [HomePage, AllordersComponent],
imports: [
IonicModule.forRoot(),
CommonModule,
FormsModule,
HomePageRoutingModule
],
entryComponents: [AllordersComponent]
})
export class HomePageModule {}
code for opening modal
async openModal() {
const modal = await this.modalCtrl.create({
component: AllordersComponent
});
return await modal.present();
}
code inside the modal component html
<ion-header>
<ion-toolbar>
<ion-title>
Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div id="container">
<strong>Ready to create an app?</strong>
<ion-button (click)="dismiss()">Close modal</ion-button>
</div>
</ion-content>
code for closing the modal
async dismiss() {
return await this.modalCtrl.dismiss();
}
Also I noted the rendering problem occurs only on firefox browser.
Any help is appreciated.
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);
}
output sample: output
In the furtherModules function, under the main module Environmental Compliance Management there is two sub modules which is Chemical Management and PPE Management, so when the user click Chemical Management it should go to a new page and when the user click PPE Management it should go to another page.I don't know how to do that. I really need help on this.
home.html code:
<ion-content class="outer-content">
<ion-card>
<ion-card-header>
{{content}}
</ion-card-header>
<ion-card-content>
<ion-segment [(ngModel)]="content" color="dark">
<ion-segment-button value="Environment Compliace Management">
<ion-icon name="flask"></ion-icon>
</ion-segment-button>
<ion-segment-button value="Health & Safety Management">
<ion-icon name="medkit"></ion-icon>
</ion-segment-button>
</ion-segment>
<ion-list style="margin: 0" inset>
<button ion-item *ngFor="let sContent of getContentItems(content)" (click)="furtherModules()">
<ion-icon item-start [name]="sContent.icon" color= "primary"></ion-icon>
{{sContent.name}}
</button>
</ion-list>
</ion-card-content>
</ion-card>
</ion-content>
home.ts code:
import {Component} from '#angular/core';
import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular';
import {ModuleListPage} from '../module-list/module-list';
import { identifierName } from '#angular/compiler';
#Component({
templateUrl: 'home.html'
})
export class HomePage{
content="MODULES";
constructor(public navCtrl: NavController, public navParams: NavParams) {}
items: any = {
'Environmental Compliance Management': [
{
name: 'Chemical Management',
icon: 'nuclear',
},
{
name: 'PPE Management',
icon: 'man'
}
],
'Health & Safety Management': [
{
name: 'Emergency Incident Management',
icon: 'alert'
},
{
name: 'Machinery Management',
icon: 'construct'
},
{
name: 'Risk Management',
icon: 'cog'
}
]
};
getContentItems(type:any){
return this.items[type];
}
furtherModules(){
}
}
First need to identify which page are we directing to, for an example in my case i generate a dummy page which is 'MyAwesomePage' and 'MyAnotherAwesomePage' then in .ts file need to do something like this
{
name: 'Chemical Management',
icon: 'nuclear',
goTo: 'MyAwesomePage'
},
{
name: 'PPE Management',
icon: 'man',
goTo: 'MyAnotherAwesomePage'
}
public furtherModules(sContent:any): void{
// Validate here if sContent.goTo is a valid page
this.navCtrl.push(sContent.goTo, {_sContent: sContent});
}
after that, in .html file need to do something like this
<ion-list style="margin: 0" inset>
<button ion-item *ngFor="let sContent of getContentItems(content)" (click)="furtherModules(sContent)">
<ion-icon item-start [name]="sContent.icon" color= "primary"></ion-icon>
{{sContent.name}}
</button>
</ion-list>
Ok i just understand what do you want to achieve
You must create a page for both Environment Compliace Management and Health & Safety Management using cli below
ionic g page Environment Compliace Management
ionic g page Health & Safety Management
refer to this link for more details,better to read the documentation first.
Add your page to your app.module.ts refer to this tutorial i dont need to explain it
third do something like below
In your html file put some input paramers to your furthermodules function
(click)="furtherModules(content)
In your ts file do something like below
furtherModules(type:any){
if('Environment Compliace Management'){
this.navCtrl.push(*name of your page to environment compliace management*)
}
else{
this.navCtrl.push(*name of your page to Health & Safety Management*)
}
}
Trying to figure out this problem. I am getting a maxmimum call stack size error and the link below is the js output.
I have added print statements and worked out the main app file is calling page1 as it should but then page1 is calling the main app file and this continues.
I am new to ionic 2 and would really appreciate a solution, thanks.
Javascript Output
page1.ts
import { Component } from '#angular/core';
import { Data } from '../../providers/data';
import { NewListPage } from '../new-list/new-list';
import { NavController } from 'ionic-angular';
#Component({
selector: 'page-page1',
templateUrl: 'page1.html',
})
export class Page1 {
public list: any[] = [];
constructor(public navCtrl: NavController, private _data: Data) {
console.log('Page1BEFORE');
let that = this;
this._data.list.subscribe((data) => {that.list.push(data);}, (err) => {console.error(err);});
}
newList() {
console.log('NEWLIST1');
this.navCtrl.push(NewListPage);
}
}
page1.html
<ion-app>
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Page One</ion-title>
<ion-buttons end>
<ion-icon ios="ios-contact" md="md-contact"></ion-icon>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content class="grid-basic-page">
<ion-col width-100><progress class="progressBar" max="100" value="80"></progress></ion-col>
<ion-row>
<ion-col width-50><div>col</div></ion-col>
<ion-col width-50><div>col</div></ion-col>
</ion-row>
<ion-row>
<ion-col width-50><div>col</div></ion-col>
<ion-col width-50><div>col</div></ion-col>
</ion-row>
<ion-row>
<ion-col width-50><div>col</div></ion-col>
<ion-col width-50><div>col</div></ion-col>
</ion-row>
<ion-list *ngIf="list">
<ion-item *ngFor="let item of list">
<ion-label>{{item.title}}</ion-label>
</ion-item>
</ion-list>
<p *ngIf="!list"> No Lists </p>
<button fab fab-bottom fab-right (click)="newList()"> New </button>
</ion-content>
</ion-app>
app.component.ts
import { Component, ViewChild } from '#angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';
import { Data } from '../providers/data';
#Component({
templateUrl: 'app.html',
providers: [Data],
})
export class MyApp {
#ViewChild(Nav) nav: Nav;
rootPage: any = Page1;
pages: Array<{title: string, component: any}>;
constructor(public platform: Platform) {
console.log('PreAPP');
this.initializeApp();
console.log('PostApp');
// used for an example of ngFor and navigation
this.pages = [
{ title: 'Page One', component: Page1 },
{ title: 'Page Two', component: Page2 }
];
console.log('pages');
}
initializeApp() {
console.log('APP');
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
Splashscreen.hide();
});
}
openPage(page) {
console.log('OpenPAGE');
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario
this.nav.setRoot(page.component);
}
}
app.html
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{ p.title }}
</button>
</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>
Removing the <ion-app> element from page1.html fixed the issue
In my case I had not declared and added routes constant in imports array of the module. Once declared and imported error gone.
I am using IONIC 4