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>
Related
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>
Good day all
I am building my first ionic 4 mobile application, and have a question about how label, icons and other elements can be connected to a form input.
In normal HTML forms you have a relationship between labels and inputs using the "for" attribute, like so:
<label for="name">Please enter name</label>
<input type="text" id="name" name="name"/>
With this relationship in place the input field gains focus when you either click on the label or on the input itself to gain focus on the input.
In ionic you use ion-label and ion-input instead of the default HTML form elements, and these seem to not share this capability.
I am specifically interested in using an icon as the aforementioned label. I tried the following without any success:
<ion-item>
<ion-label for="searchText">
<ion-icon name="search"></ion-icon> <!--name here refers to the icon displayed-->
</ion-label>
<ion-input id="searchText" name="searchText" type="text" placeholder="Search" ></ion-input>
</ion-item>
Is there something similar that one can use, or do I need to use JavaScript to achieve this?
Any advice would be greatly appropriated
So since I've been asked for a solution by someone else, let me post the workaround that I used:
I never managed to find a way to automatically add this kind of functionality like in a normal form, I did manage to trigger a click event on the icon that then caller a JavaScript function to give focus to my input field. It looks something like this:
HTML:
<ion-item color="light" class="white-iput" lines="none" (click)="focusSearch()">
<button (click)="focusSearch()" class="icon-button">
<ion-icon name="search" color="primary" for="searchText"></ion-icon>
</button>
<ion-input #input id="searchText" type="text" placeholder="Search" ></ion-input>
</ion-item>
JS (in my Type Sctipr file):
#ViewChild('input') searchInput: { setFocus: () => void; } ;
...
focusSearch() {
this.searchInput.setFocus();
}
Note that I call the "focusSearch()" function if you click anywhere in the "ion-item" wrapped around the icon and the text box, as I use CSS to have the whole thing display as a single textbox.
Hope this helps!
Cany anybody tell me how to render the following structure in
typo3 without developing a new extension.
<div class="sidebar-details">
<div class="sidebar-details-title">
<h4><span>MY TITLE</span></h4>
</div>
<div class="sidebar-details-body">
<p>
TEXT
</p>
</div>
</div>
What would be the best/recommended way to achieve this ?
Start using gridelements.
Gives you exactly what you want.
http://typo3.org/extensions/repository/view/gridelements
You can activate the RTE html mode and put it in its source or make use of HTML element, but that's depending on your needs.
If you want to keep RTE functions for editing the text what I mentioned first is the recommended way. Have done it several times myself.
If you are using Template mapping using Templavoila so, you can create FCE(Flexible content element) for it and you can map this part.
If you are using fluid template mapping so, you can create gridelement for it. and map all part.
I have the code below to show a button in a overlay.
<div class="overlay22" id="overlay22" style="display:none;"></div>
<div class="box22" id="box22">
<input type="submit" value="Submit" class="buttonclick" id="buttonclick" />
</div>
Can we show the cq5 form in the overlay instead of hardcoding in the overlay?
If you are just creating some sort of basic form template or component, I think you should just stick to using regular HTML elements and then control look + feel with CSS. Though if you absolutely needed to use form elements similar to what you see in CQ's dialog windows, you will need to generate them by working with CQ's extension of the Ext JS framework.
For example, if you wanted to create a button analogous to your provided example, you'd have to write something like:
CQ.Ext.onReady( function(){
var button = new CQ.Ext.Button({
text : "Submit",
id : "buttonclick",
cls : "buttonclick",
renderTo : CQ.Ext.getBody(),
listerners : {
click : function(){
// Write handler code here
}
}
});
});
Widget API for latest version of CQ (5.5):
http://dev.day.com/docs/en/cq/current/widgets-api/index.html
Materials on Sencha Ext JS 3.4 (which I believe 5.5 is built on):
http://docs.sencha.com/ext-js/3-4/
We can do in the following way as well,
Say for instance we have a page with default cq5 form component already dragged in that,
Let that page be defined in this path as /content/geometrix/loginpage.html
Now we can show the above page in an overlay, using the below code
<div class="overlay22" id="overlay22" style="display:none;"></div>
<div class="box22" id="box22">
<sling:include path="content/geometrix/loginpage/par" />
</div>
Below that par we can find the contents of the form.Here box22 is the lightbox(pop up) and the overlay22 is the background div
I have a custom Wizard, defined as follows:
<wicket:panel>
<div>
<form wicket:id="form" class="wizard">
<span class="wizardoverview" wicket:id="overview"/>
<div class="wizardheader" wicket:id="header"/>
<div wicket:id="view" class="wizardpage"/>
<span wicket:id="feedback"/>
<div class="buttons">
<span wicket:id="buttons"/>
</div>
</form>
</div>
</wicket:panel>
The wizardpage is in this case a Panel with its own form.
This form contains a new Panel, which in turn contains a GridView.
The GridView contains a set of Panels, which each contain a FormComponentFeedbackBorder, which in turn contains input TextFields.
Phew!
So we have this:
Wizard->WizardpagePanel->Form->GridContainingPanel->GridView->Panel[]->FormComponentFeedbackBorder->TextField
When TextField fails validation, no feedback is rendered at all.
If I add a FeedbackPanel to the GridContainingPanel the error messages are rendered, but FormComponentFeedbackBorder renders nothing.
Any pointers as to what can be wrong?
I had a similar problem with a ListView instead of GridView, but that problem was resolved when I set listView.setReuseItems(true);
Is there a similar setting for GridView, or is there a different solution to this problem?
That was it:
gridView.setItemReuseStrategy(new ReuseIfModelsEqualStrategy());
solved the problem.
Thanks, rotsch.