Is it possible to render regular HTML code in ionic? The reason behind is i want to render a chart, that is generated by a python code (Using Altair)
Thanks.
You can render regular html in ionic.
Let's assume you want to render the chart into an ion-item
The code goes something like this
<ion-list>
<ion-item>
<!-- Some code, you may use *ngFor to display the entire data -->
Example: <div class="exClass"><!-- May be a table -->{{ someData }}</div>
</ion-item>
</ion-list>
Related
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 been trying to embed html element from JSON object, and It is currently displaying the html as raw code instead.
Can someone please help me ?
detail.ts
this.questionsData[i].question_type.title = "<ion-input type=\"text\" placeholder=\"Short answer\"></ion-input>";
detail.html
<ion-item *ngFor="let question of questionsData">
{{question.title}}
<br>
Text : {{question.question_type.title}}
<br>
<div [innerHTML]="question.question_type.title">
</div>
</ion-item>
Isn't it should be input box under the text : , anyone know why it's not rendered ?
Thanks
InnerHtml will only help to render pure html code on run time, you can't use ionic components to render dynamically using innerhtml. I think you need to use dynamic component loader feature in angular here. You can refer this link on use cases of this feature https://medium.com/#DenysVuika/dynamic-content-in-angular-2-3c85023d9c36
Your approach needs to change, do not include html tags in component block, instead add parameters as json data and set it at component. Then you can interpolate the tags in the template view.
Ex:
at the component:
this.inputDataArray = [{"title":"What cartoon do you like to watch?", "name":"inp1","placeholder":"short answer"},{"title":"What movie do you like to watch?", "name":"inp2","placeholder":"short answer"}];
at the view:
<ion-item *ngFor="let question of inputDataArray">
{{question.title}}
<br>
Text : <input name={{question.name}} placeholder={{question.placeholder}} />
<br>
</ion-item>
Its just a reference, Hope it helps
This worked for me.
<div [innerHTML]="data.text"></div>
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.
The example code for the ion-nav-view directive doesn't actually show its usage.
So I'm unsure how to use it.
Here is the link to the documentation:
http://ionicframework.com/docs/api/directive/ionNavView/
under the USAGE heading it says this:
on app start, $stateProvider will look at the url, see if it matches
the index state, and then try to load home.html into the
.
Pages are loaded by the URLs given. One simple way to create templates
in Angular is to put them directly into your HTML file and use the
syntax. So here is one way to put
home.html into our app:
<script id="home" type="text/ng-template">
<!-- The title of the ion-view will be shown on the navbar -->
<ion-view view-title="Home">
<ion-content ng-controller="HomeCtrl">
<!-- The content of the page -->
Go to music page!
</ion-content>
</ion-view>
</script>
This is good to do because the template will be cached for very fast
loading, instead of having to fetch them from the network.
Do I nest all of that inside of an ion-nav-view directive? Another reason for my confusion is because in one of the ionic templates the framework provides I've seen ion-nav-view opened and closed with nothing in between it this (code below is copy and pasted directly from one of Ionic's templates) :
<body ng-app="myApp">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
This <ion-nav-view> behaves like a placeholder. Your other html files that you create under templates folder goes in there. So for example you then have "employees.html" in your templates folder. So the markup of "employees.html" will look something like this:
<ion-view view-title="Employees">
<ion-content>
<ion-list>
<ion-item ng-repeat="item in items">
Hello, {{item}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
the above is complete html that will be sitting in "employees.html". Basically this is the html that will be placed inside <ion-nav-view> tags.
Hope this helps.
In Ionic, we can do something like this for the list view:
<ion-list>
<ion-item href="#">
Butterfinger
</ion-item>
</ion-list>
And also like this:
<div class="list">
<a class="item" href="#">
Butterfinger
</a>
</div>
These 2 basically output the same layout. What is the difference between these 2? Will do it with the div method will result in better performance? If so, then why ion-list?
There is not any differences from CSS styling point of view (except some color styling on child text) between using <ion-list> and <div class="list"> because <ion-list> is a directive and it will render <div class="list"> inside it. If you inspect element you will see this
(rendered html picked from browser element inspection)
<ion-list>
<div class="list">
<ion-item href="#" class="item item-complex">
<a class="item-content" ng-href="#" href="#">
Butterfinger
</a>
</ion-item>
</div>
</ion-list>
As you can see in above code ion-list generate a div with list class.
Plus see the source code of ion-list it will make things more clearer. I am just sharing a line from source code to show what template this directive render
var listEl = jqLite('<div class="list">')
There will be no performance difference between both, but i will suggest you to use <div class="list"> if you do not want to use apis of ion-list and want to have more control over element while doing customization.
As far as your question "why ion-list" is concerned, the directive gives you access to many options in the API. The API methods listed in the bottom of the docs pages (like here for example) gives you a sense of what the directive allows you to do, instead of just using the CSS associated with the class.
Quoting from documentation
However, using the ionList and ionItem directives make it easy to
support various interaction modes such as swipe to edit, drag to
reorder, and removing items.
Conclusion: So it totaly depends upon your requirement, whether to use directive or use simple class on div.