I'm importing rss items where in description there is a lot of html code (links, paragraphs, etc...). When I'm viewing it in component's view like:
{{rss.description}}
the output in site is like:
Something <p>Long text</p>
How can I quickly and easy parse it to html? I don't want to cross it with jQuery. Thank you
Not sure if I understand your question correctly, but this might be what you want
<div [innerHTML]="rss.description"></div>
See also In RC.1 some styles can't be added using binding syntax for how to allow "unsafe" HTML.
<div class="innerhtml-class" [innerHTML]="variable.innerHtml"></div>
To add styles:
Component selector is: app-my-component
Add a class to the element hosting the innerHtml content in app-my-component template:
Add to the global styles file located in angular project src folder:
app-my-component {
.innerhtml-class {
declaration goes here
}
}
Related
In my TS file I have declare variable as element and inside that written one paragraph tag with some text
element ='<p>Something written</p>';
I want to show this as paragraph in my html file....
I tried to achieve this using below way in my html file
{{element}}
But in html it is showing as it is with the (<p>,</p>) open and close tags
<p>Something written</p>
How can I achieve this?
Please see the following example on Stackblitz.
Have a property in your component that contains HTML tags like below;
text: string = '<strong>Example of innerHTML in Angular.</strong>';
Refer to this property in your template (i.e. HTML file) as follows;
<p [innerHTML]="text"></p>
We have a project which uses drupal as a CMS.we get some data in a string format.
Some of the strings contains html tags in them.
<p>some text</p> : this is a string.
As usual when we render it in our React component the string "some text" becomes <p>some text</p>.
My question is how to parse the string as a DOM element in jsx and also can apply styles to those tags like <p>, <strong>...
Is there a way we can use?
Thanks in advance!
I found a very nice react package for the problem, where it solved everything and with the CSS targeting the child component I was able to change the styling.
html-react-parser
just install it and use it like :
let someTextvariable: any = HTMLReactParser(props.information);
Thanks to everyone.
I have a page that allows users to customise a design before downloading it. I have a list of designs that when clicked on display a different HTML layout. These HTML layouts are stored in a database as a string of HTML. To display these, i use:
<div [innerHTML]="myDesignHTML | safeHtml"></div>
As super basic example of one of the HTML strings is the following:
<div id="wrapper">
<div id="content">
<div id="title">titleText</div>
</div>
<div id="footer">
<p>footerText</p>
</div>
</div>
As I can't perform data binding on the actual HTML template that's inserted, I find the IDs of the elements and replace the 'placeholder' text with real user data. The issue I'm having is that my page also needs the ability to change colours of elements on the page. I've partially achieved this by doing the following for example:
document.getElementById("content").style.backgroundColor = color;
However, this doesn't always correctly update the DOM and feels a bit sketchy. Is there anything within Angular that allows the same functionality as [ngStyle] but within dynamic HTML templates that are inserted through [innerHTML]? When the user wants to change the colour of the background, or the text, it would be great to have a variable in the component.ts that get's updated and for the HTML template to react like [style.border-top-color]="mainCOlor" or something of the sort?
It seems that you can use the Renderer2 (see https://angular.io/api/core/Renderer2) in Angular. You would want a template reference do your div, and then you would use the nativeElement property to pull the current template. This is a better way to interact directly with the HTML inside of a div.
I have a Gatsby + WP API blog setup (with Markdown enabled) and it's working great, except when I'm trying to display HTML markup as code snippets. I'm using escape characters (see below), but for some reason the HTML inside the <code>/<pre> tags is rendering as actual HTML instead of displaying as an HTML code snippet.
I understand that's what dangerouslySetInnerHTML is there to do, but I didn't think it would if I'm using the escape character <?
Here's the markup inside the WP blog post..
<pre class="language-markup"><code>
<div>
<p>Lorem ipsum...</p>
</div>
</code></pre>
And this is how I'm displaying the entire post content in the react component...
<section className="article-body" itemProp="articleBody"
dangerouslySetInnerHTML={{ __html: this.props.html }}
/>
The <div> and <p> tags rendering as HTML, instead of displayed as a code snippet..
Is there some other way I should be doing this? For the record I also tried this using a 'non-dangerously' method (react-render-html) with the same results.
-- UPDATE: --
I was able to display the HTML as a code snippet by replacing the <code> tag with <xmp>. I know this tag is no longer officially supported, and it's far from elegant, so I think I may try to separate code snippets from the rest of the content as suggested below.
I tried it in CodeSandbox, too - working as expected. If you're sure about data (escaping) received from WP API I affraid it's a Gatsby issue. There must be a place where it's modified (unescaped).
If data will be ok and you don't want to make deep ivestigation there could be workaround. Split article body and treat sections separately - texts and code snippets. The second wrap with code literal with sth like this:
const CodeBlock = (props) => {
return <section className="article-code">
<pre className="language"><code>{`${props.html}`}</code></pre>
</section>
}
Of course remove unused first and last line of original code/snippet block.
I have to render HTML content using AngularJS, I can do it like so
<div ng-bind-html="myHtmlContent"></div>
And it works, but the only problem I have is I don't want to render it inside a string, I rather want it to just render it where I want to render it. e.g
<div>
<h2>{{page.ttitle}}</h2>
{{myHtmlContent}}
</div>
like here, I don't want to add another div, and load myHtmlContent inside. Is there a way to do that ?
Im afraid you can't, unless you write your custom directive like :
<my-direcive></my-directive>
or
<my-direcive var="myHtmlContent"></my-directive>
You can also put all diectives in one element e.g.
<body ng-app="bindHtmlExample" ng-controller="ExampleController" ng-bind-html="myHTML">
</body>
This is probably not the best practice but should work.