I have just updated my app to ionic 5 and angular 9. I was hoping that this problem will disappear with the new version but it still persists. The issue is that in my app all are pages transitioning with a black screen before the real page comes in. So the user would see for like some millisecond a black screen, what really does not look nicely. Now with the new version things got even worse. In some pages I also experience the black boxes in the ion-refresher area or when opening the keyboard. As well when opening the new modals(in some its working properly in some not) But with the modals the black background even stays behind the modal. I really have no idea why this is happening. I also don't know if code helps here because its actually the same in both modals or also for refreshing content. I have made two pictures of an correct working modal and one with the black background.
I appreciate any help and if you need further code, let me know!
further code:
working modal:
html:
<ion-header>
<ion-toolbar>
<ion-buttons slot="end">
<ion-button color="medium" (click)="dismiss()">
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title color="medium">
Privacy Policy
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="legal-content">
<p> ... </p>
</ion-content>
ts:
async showPrivacyModal() {
const modal = await this.modalController.create({
component: PrivacyPolicyPage,
presentingElement: this.routerOutlet.nativeEl,
swipeToClose: true
});
return await modal.present();
}
buggy modal:
html:
<ion-header>
<ion-toolbar>
<ion-buttons slot="end">
<ion-button color="medium" (click)="dismiss()">
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title color="medium">
Black BG
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
ts:
async openFilter() {
const modal = await this.modalController.create({
component: FilterPage,
presentingElement: this.routerOutlet.nativeEl,
swipeToClose: true
});
return await modal.present();
}
Here the pictures:
Related
I have two components to show data. The table view and the graph view. Both components has the same data. I use a toggle switch button to switch between these views. This is my code:
<ion-header>
<ion-toolbar class="toolbar-color">
<ion-title>Views</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-grid>
<ion-row>
<ion-col>
<div class="ion-text-start">
<ion-item>
<ion-label>Switch to table view</ion-label>
<ion-toggle (click)="showTable()"></ion-toggle>
</ion-item>
</div>
</ion-col
</ion-row>
<ion-row>
<ion-col>
<app-tableview hidden="true" id="tableview"></app-tableview>
<canvas height="200" #lineCanvas></canvas>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
The default view is the graphview via chart.js. Both components works fine. This is my code to hide and show:
showTable() {
if (this.tableHidden === true) {
this.tableHidden = false;
document.getElementById("tableview").hidden = false;
} else if (this.tableHidden === false) {
this.tableHidden = true;
document.getElementById("tableview").hidden = false;
}
}
When I click on the toggle switch it doesn't hide the graphview but it shows the table view among each other. I have tried the visibility from this post but doesn't work.
JavaScript hide/show element
How can I switch between the components and show only view?
JSFiddle link: https://jsfiddle.net/f8a3wgxb/
An example based off #alex87's comment:
<ng-container *ngIf="!tableHidden">
<app-tableview id="tableview"></app-tableview>
</ng-container>
<ng-container *ngIf="tableHidden">
<canvas height="200" #lineCanvas></canvas>
</ng-container>
Doesn't have to be an ng-container, but that Angular-only tag will not add anything to the DOM. You can always use a or anything else to do just the same...
You can also neaten it up by using an *ngIfElse...
https://angular.io/api/common/NgIf
Note: I tend to go overboard in my tag wrapping, thus the ng-containers, but *ngIf is typically available on almost all tags, as is hidden - per your usage.
Edit: Fixed the hidden variable name - I was lazy and didn't go back up to find what exactly you'd called it.
Edit #2: You can tidy up and minimise your setting of the hidden variable, instead of needing the if/else.
// This toggles between true/false
this.tableHidden = !this.tableHidden;
document.getElementById("tableview").hidden = !this.tableHidden;
Reduced to only two lines.
It's my first time using ionic 5. So i try to add an side menu in my app. But when i add it, it was hide by my page content. Everywhere i call it. Did you meet the same problem ?
my app.component.html
<ion-app>
<ion-menu contentId="menu-content" menuId="menu-content" side="end">
<ion-header>
<ion-toolbar>
<ion-title>Awesome avocado menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
Awesome avocado content
</ion-content>
</ion-menu>
<ion-router-outlet id="menu-content"></ion-router-outlet>
</ion-app>
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button routerLinkActive="tab-selected" routerLink="/home" class="ios" tab="home">
<ion-icon name="list-box"></ion-icon>
<ion-label>Appointments</ion-label>
</ion-tab-button>
<ion-tab-button routerLinkActive="tab-selected" routerLink="/make-appointment" class="ios" tab="make-appointment">
<ion-icon name="add-circle"></ion-icon>
<ion-label>Book Appointment</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
in my home.html
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button auto-hide="true" ></ion-menu-button>
</ion-buttons>
<ion-title>app-menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy
</ion-content>
Thank you!
The reason it gets overlapped by your page content is that you have <ion-tabs> placed outside of <ion-app> .
App is a container element for an Ionic application. There should only
be one element per project. The overlay components get appended to the <ion-app> when they are presented.
So, place your ion-tabs inside ion-app. But a more optimized approach would be to place your <ion-tabs> in a separate page like home.component.html because ion-tabs are also container of other pages (tabs). From there you can create your logic of opening the tabs.
This simple tutorial would help: https://www.freakyjolly.com/ionic-tabs-bar-navigation-tutorial/#.X-Q0P9gzbIU
I thought this was pretty easy, but i don't have a clue of how to make it work, my last try is on the style attribute in the button tag, i've searched the web for like and hour and nothing works.
<ion-header>
<ion-navbar color="danger">
<ion-title>Cadenas</ion-title>
</ion-navbar>
</ion-header>
<ion-content container class="card-cadenasmercados">
<button id="sucursal"
*ngFor="let cadena of cadenasCollection"
[navPush]="sucursalesPage"
[navParams]="cadena"
style:background='{{cadena.img}}'>
{{cadena.nombre}}</button>
</ion-content>
You can use ngStyle: https://angular.io/api/common/NgStyle
<button id="sucursal"
*ngFor="let cadena of cadenasCollection"
[navPush]="sucursalesPage"
[navParams]="cadena"
[ngStyle]="{'background': cadena.img}">
{{cadena.nombre}}</button>
this assumes cadena.img is something like "url(someimage.png)"
This error seems to be a plague haunting Ionic 2. I've looked at several questions on this topic but none have been of help so far.
I've created this component Layout Component which wraps all my pages:
<ion-header>
<ion-navbar>
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
{{pageName}}
</ion-title>
</ion-navbar>
</ion-header>
<ng-content>
</ng-content>
<ion-footer>
<ion-toolbar>
<ion-tabs>
<ion-tab [root]="usersPage" tabTitle="Chat" tabIcon="chat"></ion-tab>
</ion-tabs>
</ion-toolbar>
</ion-footer>
and the TS File looks like so:
export class AstootLayoutComponent {
#Input() pageName: string;
usersPage: any = UsersPage;
profilePage: any = ProfilePage;
}
Then I have a users page which consumes this component which looks like so:
<astoot-layout [pageName]="pageName">
<ion-content padding>
<page-list-base [detailPageType]="userDetailType" [baseProvider]="baseProvider" [config]="pageListConfiguration"></page-list-base>
</ion-content>
</astoot-layout>
When I attempt to start my application I receive an error:
Maximum call stack size exceeded
TypeError: Cannot read property 'getList' of undefined
at PageListBaseComponent.set [as baseProvider] (http://localhost:8100/build/main.js:115817:21)
at Wrapper_PageListBaseComponent.check_baseProvider (/AppModule/PageListBaseComponent/wrapper.ngfactory.js:38:31)
at CompiledTemplate.proxyViewClass.View_UsersPage0.detectChangesInternal (/AppModule/UsersPage/component.ngfactory.js:80:35)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:8100/build/main.js:111909:14)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:8100/build/main.js:112104:44)
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:8100/build/main.js:111894:18)
at CompiledTemplate.proxyViewClass.View_UsersPage_Host0.detectChangesInternal (/AppModule/UsersPage/host.ngfactory.js:29:19)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:8100/build/main.js:111909:14)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:8100/build/main.js:112104:44)
at ViewRef_.detectChanges (http://localhost:8100/build/main.js:77367:20)
at NavControllerBase._viewAttachToDOM (http://localhost:8100/build/main.js:43575:40)
at NavControllerBase._transitionInit (http://localhost:8100/build/main.js:43678:18)
at NavControllerBase._postViewInit (http://localhost:8100/build/main.js:43531:14)
at NavControllerBase._viewTest (http://localhost:8100/build/main.js:43627:25)
at NavControllerBase._nextTrns (http://localhost:8100/build/main.js:43370:25)
Through some investigation the cause seems to be the fact that the AstootLayoutComponent references the Users page, where it resides in. Some how the creates a forever loop.
Why is this happening, the documentation doesn't seem to mention that you can't next this component on the page. How can I fix this?
Bounty Edit
I've created a Repository which replicates my issue
Just as a warning since the tabs controller is in a forever loop, and the api is pointed to github, so you may want to switch that before hitting there rate limit, you can change the url in the Environments.ts
I think you need to add a Tabs Component. Therefore some of the work you were doing in the astoot layout gets moved to this Tabs Component. I opened a PR: https://github.com/granthoff1107/Ionic-Sample-Max-Exceed/pull/1
I tested this and no more stack errors since you no longer have the recursive relationship between the astoot layout and the ion-tabs.
Remove the tabs component from the Astoot Layout Component:
<ion-header>
<ion-navbar>
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
{{pageName}}
</ion-title>
</ion-navbar>
</ion-header>
<ng-content>
</ng-content>
Create a seperate Tabs Component:
<ion-tabs>
<ion-tab [root]="usersPage" tabTitle="Chat" tabIcon="chat"></ion-tab>
<ion-tab [root]="profilePage" tabTitle="Profile" tabIcon="person"></ion-tab>
</ion-tabs>
With a type script file that contains the pages from the astoot layout component.
import { ProfilePage } from './../profile/profile';
import { UsersPage } from './../users/users';
import { Component } from '#angular/core';
#Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
usersPage: any = UsersPage;
profilePage: any = ProfilePage;
constructor() {
}
}
Add your new tabs page the app.module.ts and set your rootPage: any = TabsPage; this will now act as your master page and your content will be transcluded into your view.
I am trying to add a variable containing html to my ionic 3 page
Ionic Page:
<ion-header>
<ion-navbar>
<ion-title>{{offeritem.data.nameprovider}}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div>
{{offeritem.data.detailsoffer}}
</div>
</ion-content>
However I am getting the following
Result:
<p>The table contains 30 pieces:</p><ul><li>5 Philadelphia Roll</li>
<li>5 Fantasia Roll</li>
Please let me know what I am doing wrong in this case.
Thanks in advance
You should use [innerHTML] for ionic 3 like this:
<p [innerHTML]="yourVarHere"></p>
<span [innerHTML]="offeritem.data.detailsoffer"></span>
REF
Note the section on "Property binding or interpolation?"
import {DomSanitizationService} from '#angular/platform-browser';
class....{
public getSafehtml(html:string){
return this.sanitizer.bypassSecurityTrustHtml(html);
}
}
<ion-content padding>
<div [innerHTML]="getSafehtml(offeritem.data.detailsoffer)"></div>
</ion-content>
If you not bypassSecurityTrustHtml then your style will not work.