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.
Related
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 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:
I need to place the ion-refresher inside a component.
I have a list which is identical in look and behavior, my list component should have refresher, infinite-scroll etc in that one component
I try to add ion-refresher to a custom component.
<ion-refresher (ionRefresh)="refreshList($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
but I get this error:
Parse Error: No provider for Content
Did u try?
<ion-content>
<ion-refresher (ionRefresh)="refreshList($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
</ion-content>
As mentioned here and in the docs you need to put your refresher inside a <ion-content> tag.
<ion-content>
<ion-refresher (ionRefresh)="refreshList($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
</ion-content>
when we place ion-refresher inside ion-content, it creates extra space
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.