I am using Mustache to render templates.
I have this json object:
{
title: "Foo bar",
content: "<p> Html here </p>",
footer: "footer content here"
}
I have a Mustache template like:
<div id="box">
<div id="title"> {{title}} </div>
<div id="content"> {{content}} </div>
<div id="footer"> {{footer}} </div>
</div>
My problem is that the html within the variable content is not getting rendered but instead is just getting printed to the screen.
I see (in non-view source window): <p> Html here </p>, where I would only want to see that if I viewed the page source.
How can I fix such that when I pass in a string to a mustache template the HTML inside gets rendered? I am calling mustache.render(templates.all,data); as my call to mustache.
From the Mustache documentation:
All variables are HTML escaped by default. If you want to return
unescaped HTML, use the triple mustache: {{{name}}}.
So you just have to use eg.{{{content}}} in your template:
<div id="box">
<div id="title"> {{title}} </div>
<div id="content"> {{{content}}} </div>
<div id="footer"> {{footer}} </div>
</div>
Related
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
I have a handlebar template that displays a company address.
Whenever the address contains the number sign(#), the rendering stops and HTML is incomplete.
I also tried adding a simple HTML value Company# and it doesn't load as well.
I'm using handlebar 4.7.6. Any insights will do. Thank you.
Handlebar Template
<div class="row">
<div class="col">
<h4>Address: <small>{{company.address}}</small></h4>
</div>
</div>
<div class="row">
<div class="col">
<h4>Description: <small>{{company.description}}</small></h4>
</div>
</div>
Compiling handlebar
var templateHtml = fs.readFileSync(path.join(process.cwd(), 'pdfTemplate.html'), 'utf8');
var template = handlebars.compile(templateHtml);
var html = template(treatmentJson);
To escape special HTML syntax, you can use {{{variable}}} instead of the usual double curly brace sign. This should solve your problem.
Reference
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 seriously don't know, why the fragments is the problem.
<template>
<div id="page">
</div>
<div class="some">
</div>
</template>
[Vue warn]: Attribute "id" is ignored on component "div"
You need to wrap the contents of your template in another div. When it comes to render it, it needs the single root element to replace
<template>
<div>
<div id="page">
</div>
<div class="some">
</div>
</div>
</template>
Vue v3 now supports multi-root templates. Your code should work out-of-the-box.
https://v3-migration.vuejs.org/new/fragments.html
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