I have a component called "dishes" in which I have an option to get the recipe details of the selected dish from a microservice.
microservice actually returns the recipe details in html format.
Once I get recipe details I want to use the same HTML response to render in RecipePage.
I tried to hold the response in a global variables and tried to use the same to render in RecipePage
<ion-header>
<ion-navbar>
<ion-title>Dish Recipe</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
{{htmlRecipe}}//a global variable that holds the recipe details
</ion-content>
It neither shows up any content in htmlpage nor any error. When I try to log the content in console log says undefined
How to just render the dynamic html page with out any modifications?
Related
I have an iframe page which shows a form which stores data in the session. But once the form is submitted the data from the form is not available as POST and the data which is set in the session is also not available.
Any thoughts?
sample code
<ion-content padding>
<div #frame style="width:100%;height:100%;overflow:scroll !important;-webkit-overflow-scrolling:touch !important">
<iframe [src]="adURL | safe : 'resourceUrl'" class="iframe" scrolling="yes" style="width:100%;height:100%;"></iframe>
</div>
</ion-content>
I would like to have a unique ion-title for each page of my ionic app (News, Search etc) but include a settings icon in the toolbar as well that will bring up a modal with a couple different options for the user to interact with. I want to avoid rebuilding the settings icon to keep my code DRY, prevent the unnecessary imports, and preserve separation of concerns.
news.page.html
<ion-header>
<ion-toolbar>
<ion-title>
News
</ion-title>
</ion-toolbar>
</ion-header>
app.component.html
<ion-app>
<ion-header>
<ion-icon (click)='openSettings()' slot='end' name='settings'></ion-icon>
</ion-header>
<ion-router-outlet></ion-router-outlet>
</ion-app>
As expected the page header overwrites the entire app header. I am thinking about building a separate settings icon component, but (I believe) that will require me to import it into every page.
Any help is appreciated.
I write app to display latest posts from one portal.
I download the content and display it in html template via [innerHtml].
Some posts may contain galleries that I'd like to show with Modal Page that has a slider.
My html template
<ion-content padding>
<div [innerHtml]="sanitizer.bypassSecurityTrustHtml(pageContent)" >
</div>
</ion-content>
How can I call function to open Modal (defined in post.ts) from downloaded html?
I sanitize the html so my code isn't removed, but normal Ionic methods like (click)="openModal()" don't work.
My downloaded html:
<button (click)="openModal()">Show gallery</button>
Maybe some javascript onclick="openModal()" ? But then I get openModal is not defined.
I have a very simple app so far, but I can't figure out how to fix the overlapping of the content (header on top of the content). I have created a component header that contains the header as the name suggest.
header.html
<ion-header>
<ion-navbar color="dark">
<ion-title>
Some Title
</ion-title>
</ion-navbar>
</ion-header>
I have been trying to use it on different pages, but it always overlaps the content of the page.
page.html
<app-header></app-header>
<ion-content padding>
<h1>Some Page</h1>
</ion-content>
I have tried using div tag instead of ion-content, and also tried using class="has-header", but nothing seems to be working. Although, if don't use the header as a component such as the following, it works fine. But I want to use the header as a component so that I can reuse it on other pages.
page.html (don't want to have it like this)
<ion-header>
<ion-navbar color="dark">
<ion-title>
Some Title
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h1>Some Page</h1>
</ion-content>
As pointed out in this thread of Ionic official forum by #brandyshea of Ionic team, the thing is that in one page you can only have 3 kind of tags as top tags, everything else must go inside one of them. The 3 tags are:
<ion-header></ion-header>
<ion-content></ion-content>
<ion-footer></ion-footer>
I was trying to organize my app as #Hafiz and stumbled on the same problem, the solution has been to put my custom header (<ew-navigazione-top>) inside <ion-header> in each page.
<ion-header>
<ew-navigazione-top [ew_title]="navParams.get('label')" [ew_subtitle]="The subtitle"></ew-navigazione-top>
</ion-header>
P.S. This is the solution for Ionic 3. For previous versions on the same linked thread you can find other specific solutions.
try with below :
<app-header></app-header>
<ion-content style="margin-top:__px">
<h1>Some Page</h1>
</ion-content>
I want to have a fixed logo in the Ionic2 framework. I have transitions between pages and the header and pages gets slid in. I want to know if I can keep the header / logo a constant above anything on the page.
<ion-header>
<a (click)="goToRoot()" ><img src="assets/img/topBar-iPad.png" alt=""/></a>
</ion-header>
<ion-content padding>
</ion-content>
I have tried it with the toolbar this doesn't work either.
If you want put an image in header, you can use this code:
<ion-header>
<ion-navbar>
<ion-title>Title</ion-title>
<ion-buttons end>
<img height="35px" width="35px" src="assets/img/topBar-iPad.png">
</ion-buttons>
</ion-navbar>
</ion-header>
This might get a bit tricky if you app becomes a bit more complex over time, however what you can do is add your <ion-header> element to your app.html file found in src -> app.
That sets it at top level above the pages you are navigation to.
If your app does become complex over time where only in some cases you want the toolbar to be fixed at the top you might need to either create a custom component based on the element or pass in a *ngIf ( or [hidden]="") and then write logic to support its visibility.