Let's say an endpoint returns this HTML:
<div data-type="section">
<div data-type="section-header">
Section 1
</div>
<div data-type="section-body">
Lorem ipsum
</div>
</div>
Above template will be stored in component property sections. In an Angular app we will append this HTML to the page via <div class="sections-container" [innerHtml]="sections"></div>.
Before appending HTML template to innerHtml, is it possible to add component or directive to the HTML template received from the backend?
For example we have HighlightDirective, which will set background to yellow and we want to apply it to data-type="section-header" element, so that HTML template will look like this:
<div data-type="section">
<div data-type="section-header" appHighlight>
Section 1
</div>
<div data-type="section-body">
Lorem ipsum
</div>
</div>
Will Angular automatically recognize the appHighlight directive and add it to the component tree? Or it's necessary to hydrate this HTML template?
The solution that I have found it is wrapped HTML into anonymous component and handle string from BE. Then compile that and looks like everything is ok.
Stackblitz example
Related
I have a given HTML string that I need to display in my Vue component.
Context: KaTeX is a typesetting library that renders mathematical syntax into easy to read equations.
Here is the string:
<p>A pintail population, <div v-katex="'p'"></div>, of <div v-katex="'1000'"></div> bacteria tows in number according to the equation <div v-katex="'\\displaystyle p(t) = 1000(1 + \\frac{4t}{t^2+ 50})'"></div>, where <div v-katex="'t'"></div> is in hours. Find the rate which the population is growing after <div v-katex="'1 h'"></div> and after <div v-katex="'2h'"></div>.</p>
Here it is in my code:
renderKatex() returns a String of HTML code.
Here it is in the web browser dev tools:
But here it is displayed:
As you can see, the <div v-katex> elements are not showing up. Except, when I hardcode the previous HTML in the template (I copied and pasted the HTML from dev-tools), it displays:
Displayed:
So there seems to be some issue with the Vue directive "v-html" that doesn't render the elements properly.
I'm working on an Angular 4 project and I'm stuck on a problem regarding templates.
Let me explain it better.
I have two components in my project:
SectionCompontent.ts
HomeCompontent.ts
These are the relative HTML templates
section.compontent.html
<div class="section">
<div class="cards">
<ng-content></ng-content>
</div>
</div>
home.compontent.html
<section>
<div *ngFor="let card of cards">
<span>{{card.title}}</span>
</div>
</section>
When I run this project, I expect to see the rendered content of *ngFor projected inside SectionComponent where <ng-content> is located.
Unfortunately, this is what I see on the DOM instead of <ng-content>:
<!--bindings={}-->
I added some static HTML tags like <p> and <h1> and they allowed it to work.
Can you help me solve this problem?
Thanks in advance.
I am trying to add a render a template using the push mutation method. I want to push a section component, but instead of the template content I get the raw output of <vsection></vsection'. Can anyone help me render the actual template content and not the raw tags? I included a jsbin below.
http://jsbin.com/wurofatuve/1/edit?html,js,output
You're thinking about this a little oddly. What I think you'd be better off doing is putting a v-for on a <vsection> component.
<vsection v-for="section in sections">
{{ section.content }}
</vsection>
This way, when you push content to sections it'll out put another one. You'll also have to adjust your section component so you can use the content.
<template id="section-template">
<div class="section">
<slot></slot>
</div>
</template>
Here it is working like I think you want: http://jsbin.com/suhadidobe/1/edit?html,js,output
I have an email template body (in html) that's generated by a server. The template has a section I'd like to make editable in a React component. Simplified, the template looks like this:
<div class="message">
<p>Hello!</p>
<p>Welcome to our app... blah blah</p>
<div class="user-customisable"></div>
<p>Yours, app support</p>
</div>
In my frontend app, I'd like to render the template as it will appear in the final email (which I can do with dangerouslySetInnerHTML), but I'd also like the user-customisable div to be editable so the admin can add a custom message.
I need to be able to add a textarea or contenteditable attribute and hook it up to the state but I'm not sure how to go about it, any pointers would be greatly appreciated!
I am using ionic tinder cards and each new card should be inserted in an predefined array as an object, likewise:
{text: "some_text"}
However, I might be getting html in the string and I want that html to be rendered. How can I do this considering the object above goes to a predefined array, something happens on the ionic code and then I inject it like this?
<div class="card">
{{card.text}}
</div>
use ng-bind-html directive: may be require import the sanitize module
<div class="card">
<span ng-bind-html="card.text"></span>
</div>
You should use ng-bind-html
<div class="card">
<span ng-bind-html="card.text"></span>
</div>
If your HTMl contains potentially dangeorus tag (like script tag), you should sanitize it before