I am using Angular for a project and I want to display some data on a page that comes from a JSON file. My problem is that the message is big and I would like it to be displayed with bullets points
"messageToDisplay": "this is a long message with 1) first bullet point 2) second bullet point",
Now in my html I would like this to be rendered in that way
<div>
<p>This is a long message</p>
<ul>
<li> first bullet point </li>
<li> second bullet point </li>
</ul>
</div>
Is this even possible?
I am beginner in angular so I don't know everything
EDIT: More easily explained: can I add html tag inside a JSON string value?
Yes, you can place HTML into any JSON string value.
You can then display in angular using innerHtml binding.
<div [innerHtml]="response.message"></div>
The string gets sanitized for you by Angular so you don't have to worry about XSS.
Related
I have this code.
this._notificationService.showInfoMessage
(
'The list below cannot be reached'
+ `'<ul>
<li> ${this.tagList
.map(i => i.tag)
.join(',')} </li>
</ul>'`
);
It does not work
I want add html list inside component.ts file for this tag list and show list items one by one as a list with bullets.
I have tried many ways.
I made it using browser inspect view
I want to get as below one
please suggest best way for this
Why it doesn't work?
Just check what says the official Angular documentation.
Angular recognizes the value as unsafe and automatically sanitizes it,
which removes the script element but keeps safe content such as the
element.
https://angular.io/guide/security#sanitization-example
That is how it's working!
But still, you have many options to achieve your goal.
Since you have a list/array of tags you could just iterate over them in the template and use string interpolation.
<ul>
<li *ngFor="let tag of tags">{{tag}}</li>
</ul>
Text interpolation:
https://angular.io/guide/interpolation
P.S Please, share with us what your service/component looks like.
I am working for a client who currently has their product attributes defined in a single textarea field in their CMS. The attributes are separated by asterisks (*)
e.g. * 100% cotton * Machine washable * Loose fit
I want to format these as an unordered list in html but WITHOUT the use of javascript or jQuery. They need to be rendered at JSP page load level.
Unfortunately, amendments to the CMS at this point are not possible for me.
Any suggestions?
Thanks to Alvaro, I used the following:
<c:set var="attribute" value="${product.attributes.value}"/>
<c:set var="attributeList" value="${fn:replace(attribute,'*', '<li>')}" />
<ul>
${attributeList}
</ul>
I am storing this string within a ResourceFile:
Please select a #Html.ActionLink("Personal", "PersonalAccount", "Help"),
or a #Html.ActionLink("Corporate", "BusinessAccount", "Help") account.
Now I want to put this content on a Span element inside the Title attribute.
I tried this without success :
<span class="tooltip-icon tooltip"
title="#Html.Raw(HttpUtility.HtmlDecode(ToolTips.AccountType))">
</span>
The issue is that I am seeing the regular text, not the content encoded.
Razor is not going to double parse your page, It parses your page and renders the content of your resource which is a text having # in it(Please select a #Html.ActionLink("Personal", "PersonalAccount", "Help")). It doesn't care what is in the resource.
Any how, you can't do it this way and you shouldn't, the only culture specific part of your code is the link's text which you should just put that part in your resource file not whole of that line.
Using VahidND suggestion I was able to do it without Razor inside the Resource file.
So I actually ended with this :
<span class="tooltip-icon tooltip"
title="#String.Format(ToolTips.PTAccountTypeRadio1,
Html.ActionLink(ToolTips.PTAccountTypeRadio2, "PersonalAccount", "Help"),
Html.ActionLink(ToolTips.PTAccountTypeRadio3, "BusinessAccount", "Help"))"
</span>
I see an entry here:
How to add bullets
It shows how to add bullets into IOS UITextField.
What I need is something different. I want to save the HTML code in the database like:
<ul>
<li>item1</li>
<li>item2</li>
</ul>
And then show it in IOS application as seen in the browser.
What is the good way of it?
I dont know if there is any such HTML interpreter/parser that will directly convert this code to NSString.
What I would suggest is that : Save the text in database as plane string with bullets or any prefix as <bullet>item1.
And while showing to the UI, first read that string from the database and replace <bullet> with some text as • (dot buttlet, Unicode code point U+2022).
Or you need to use regex to convert your HTML tag and then replace <li> with •
Am I missing something? Why not just UIWebView instead of UITextField?
I have an object that has a title and some text (item.itmTitle and item.itmText) which I am passing to an HTML template using Play's render() method. Within the template (which in this case is called "index.html) I am trying to display the contents of the item object:
.
.
.
<p class="title">${item.itmTitle}</p>
<div id="itemtext">${item.itmText}</div>
.
.
.
My problem is this: the contents of item.itmText are HTML formatted. What I would like is for the contents to be displayed as HTML, but what is happening is that Play is doing all necessary conversions to display the contents as text. In other words, if item.itmText has the following HTML:
<p>This is a paragraph formatted in HTML</p>
The play template converts the source as follows:
& lt;p& gt;This is a paragraph formatted in HTML& lt;/p& gt;
My question is: is there some way to stop this conversion and make the HTML appear on the page as renderable HTML?
Someone please advise.
${item.itmTitle.raw()}
You just need to make sure that these strings are guaranteed to be safe; e.g. if users are submitting the title or text you need to sanitize the content to prevent injection of javascript (or accidental breakage of your container tags).