Is it possible to give angular expression inside a JSON file like this:
{
"headerHTML": "<div>{{clippedCoupons}}</div>"
}
And bind it to a directive template like this (the below convertAsHtml is a filter for trustAsHtml):
<header data-ng-bind-html="headerHTML|convertAsHtml">
</header>
When I bind the JSON, I'm getting {{clippedCoupons}} expression as such in the page. Is is possible to change it dynamically in our controller?
Related
I am working on project with Angular 12 and I have an HTML response I want to display. I want to bind innerHtml of div to variable value
I use this syntax {{value}}
You should use [innerHTML] property binding to your element , like this :
<div [innerHTML]="response"></div>
In an angular HTML template, I am trying to pass the function name dynamically as the value of
(click) = "{{dynamicFunc Name}}"
but it is giving interpolation error.
Is there any way if we can make it work?
No, this syntax is incorrect. In Angular templates, you can bind to component properties or methods using the following syntax:
<button (click)="dynamicFuncName()">Click me</button>
You cannot use interpolation syntax {{}} inside the event binding syntax ().
You can use a function inside the interpolation without (click) directive like below. But I don't advise it. İnstead of it, check about Angular Pipe.
<div>{{dynamicFuncName()}}</div>
If you wish dynamic functions name on element. Follow this code:
<button (click)="this[dynamicFuncNamesArray[0]]()">Click me</button>
dynamicFuncNamesArray = ['dynamicFuncName'];
dynamicFuncName() {
console.log('dynamicFunc');
}
I use expressjs and hbs(Handlebars) as the template engine.
One of the parameters that are passed to the template when loading the page contains HTML code.
When the page loads, instead of processing the parameter and displaying the elements, it is displayed as text.
How can I solve this?
//Server-side:
let parameter = "<h2 id="how-to-use">How To Use</h2>";
//HTML:
<div id="container">{{parameter}}</div>
//--------------------------------------
//result after page load
<h2 id="how-to-use">How To Use</h2>
//Instead of
How To Use
got it.
use the triple {{{ }}} brackets
I have a component in Vue component-z.
I need to pass in certain parameters, so when I use this in my Vue's html I do as follows:
<component-z id="component" data1="data" data2="moreData"></component-z>
I need to take the html out of this and pass it as a message to a parent frame (from an iFrame). Is there a way to do something like:
<component-z id="component" data1="data" data2="moreData"></component-z>.toHtml()
First, add a ref attribute to the line, such as ref='component-z'
If you are inside the <script> portion of the Vue file, you can access the Vue instance and its references like this:
this.$refs
To access the outer HTML (or rendered/raw HTML) of that component, use
this.$refs["component-z"].$el.outerHTML
Note the "component-z" portion of that JavaScript, which corresponds to that ref attribute you set.
when I use Backbone toJSON method of the model like this:
this.$el.html(this.model.toJSON());
It doesn't render model into view root element ( more than one attribute ).
But when I get one property from the model, like this;
this.$el.html(this.model.get("city"));
It is rendered properly.
Also, when I use template in first case (toJSON) - it is rendered fine.
this.$el.html(this.template(this.model.toJSON());
Why is that ?
Thanks
this.$el.html(this.model.toJSON());
You're using the html method of jQuery, which expects a string (or a DOM element, or a jQuery element), to display a JSON object.
this.$el.html(this.template(this.model.toJSON());
Here you're using a template method which, I assume, is taking a JSON object to evaluate a template that will return you a string. The htmlmethod receives this string and displays it.
this.$el.html(JSON.stringify(this.model.toJSON()));
This would display the result of this.model.toJSON() (but won't do the same as using your template method).
So, basically this.template will be (in most of the cases) a compiled version of the html template which you have for the view.
It will have placeholders in it, and will take parameters with the same key as placeholders in the template. For example (Handlebars templates),
<section id="{{id}}">
<header>{{header_text}}</header>
</section>
Considering the above code as a template, when you compile and store it in this.template, it returns a function, which takes a json object as a parameter, so now this.template is a function.
You can call it like below,
var html_text = this.template({
id : "main_content",
header_text : "Hi Welcome !!"
});
this.$el.html(html_text);
After the execution, el's contents will be
<section id="main_content">
<header>Hi Welcome !!</header>
</section>
So when you do this.$el.html(this.template(this.model.toJSON());, it actually generates the required json parameter for the this.template method for you, hence works fine.
And as Loamhoof said, in this.$el.html(this.model.get("city")); you use the html method which will set the html content of the el based on the property value of the model.