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.
Related
I have a HomePage(main page) from which multiple modals are opened (modal1,modal2,modal3). On the last modal 'modal3', I have an ion-search with an ion-virtual-scroll to populate the results which will be show in a card.
Each of these card has an router-link attached to it.
Upon clicking on the card it should open a 'Page' which is associated with the id and present, but since its a page it does not show on top of the modal and is only visible once the modals are dismissed.
I have tried to follow the ion-nav from here but I couldn't get it working and got me all confused.
Modal 3 Code...
<ion-virtual-scroll [items]="this.speclFun.questions" approxItemHeight="185px">
<ion-card *virtualItem="let itemMod;" [routerLink]="['/main/user/tabs/home/view',itemMod.id]" (click)="openPage()">
<ion-row>
<ion-col size=" 12">
<ion-card-header class="card-header">
<ion-icon name="help-circle-outline" style="margin-right: 5px;"></ion-icon>
<ion-label>{{ itemMod.title }}</ion-label>
</ion-card-header>
</ion-col>
</ion-row>
<ion-row>
Modal 3 typeScript:
async openPage() {
const modal = this.modalController.create({
component: ModalBaseComponent,
componentProps: {
rootPage: AnswerPage
}
})
}
Shared Components module is declared as an import in my homepage.module.ts file.
Shared-component module :
modal-base component :
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 have 2 pages, login and home, when the user successfully logins, it will be directed to the home page and I set this as the root page. I've confirmed this by using navCtrl.canGoBackFunction and it is false. I tried adding a Menu Toggle but when I pressed the toggle button the menu does not show up
This is my home.html
<ion-header>
<ion-navbar color="primary">
<button menuToogle ion-button icon-only class="menu-button-left">
<ion-icon name="menu"></ion-icon>
</button>
<ion-title class="alogo"><img alt="logo" height="35" src="../../assets/imgs/logo.png" ></ion-title>
<button ion-button class="menu-button-right" (click)="logout()">
<p>Logout</p>
</button>
</ion-navbar>
</ion-header>
<ion-content padding-left padding-right>
</ion-content>
my home.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { LoginPage } from '../login/login';
import { AuthService } from '../../app/services/auth.service'
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(
public navCtrl: NavController,
private authService: AuthService
) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad HomePage');
console.log(localStorage.getItem('token'));
}
logout(){
console.log('logout button clicked');
this.authService.logOut();
this.navCtrl.setRoot(LoginPage);
this.navCtrl.popToRoot();
}
}
my app.html
<ion-menu [content]="mycontent">
<ion-content>
<ion-list>
<p>List/p>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #mycontent [root]="rootPage" swipeBackEnabled="false"></ion-nav>
I've re-read multiple times the manual and I didn't see any issues with the way I did, the manual says it I put it in navbar the page should be root. I also tried using a toolbar but again clicking the menu toggle button does not do anything. Any idea ?
Persistent menus display the MenuToggle button in the Navbar on all pages in the navigation stack. To make a menu persistent set persistent to true on the element. Note that this will only affect the MenuToggle button in the Navbar attached to the Menu with persistent set to true, any other MenuToggle buttons will not be affected. In your code you have to change like below code.
my app.html
<ion-menu [content]="mycontent" persistent="true">
<ion-content>
<ion-list>
<p>List/p>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #mycontent [root]="rootPage" swipeBackEnabled="false"></ion-nav>
I'm using Ionic 3.*, tring to create a component that contains just a button.
The component code is:
#Component({
selector: 'profile-button',
templateUrl: 'profile-button.html',
})
export class ProfileButtonComponent {
constructor(
private popoverCtrl: PopoverController
) {}
/**
* Present the Profile popover
* #param ev
* #returns {Promise<any>}
*/
async presentPopover(ev) {
let popover = this.popoverCtrl.create(ProfilePopover);
return popover.present({
ev
});
}
}
and my template is:
<button ion-button icon-only (click)="presentPopover($event)" title="Profile">
<ion-icon name="person"></ion-icon>
</button>
The problem:
The problem is that the icon-only directive is just ignored. The button still have a background color.
If I put the template outside the component, it shows the right style.
Looks like the directives is not available inside a Component. My component is inside a custom module, not on AppModule.
How can I solve this? Found that on Ionic2 i need to import the directives manually, but it don't work on Ionic3.
I've solved the issue, maybe with an workarround:
Changed the component selector to attribute selector: [profile-button]
Wrapped the template in a <ion-buttons end> tag
Called the component as an attribute of <ion-buttons end>
<ion-buttons profile-button end></ion-buttons>
Note: The issue wasn't with icon-only directive. But it's a style issue on Ionic that required the button directly child of the toolbar or ion-buttons to get proper styles.
I found solution on another S.O. thread.
In your *.module.ts add IonicModule into imports section.
#NgModule({
imports: [
CommonModule, // <-- standard Angular module
IonicModule // <-- standard ionic module
], ...
})
In your template try adding your content inside a ion-content
<ion-content>
</ion-content>
you can remove ion-button and add:
class="disable-hover button button-ios button-clear button-clear-ios button-clear-ios-dark"
change dark as you want.
Hi i just started using ionic 2 for my project , how to update ui value in ionic 2? jus simply when we click button some text changed. I tried this but didnt work
home.ts
#Component({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
public test: any;
constructor(private nav: NavController) {
}
update(){
this.test = "updated text";
}
}
home.html
<ion-content>
<p>{{test}}</p>
<button (click)="update()">update</button>
</ion-content>
Please help, thanks!
On HTML you should use {{test}} as you are modifying test varaible value.
<ion-content>
<p>{{test}}</p>
<button (click)="update()">update</button>
</ion-content>
The possibility is, you might have missed to bootstrap you application main component, you can see similar kind of answer here
change your home.html to this
<ion-content>
<p>[(ngModel)]="test"</p>
<button (click)="update()">update</button>