My attribute has ES6 template value:
<span style="width:${Width}"> </span>
After minifying it becomes
<span style="width:{};"> </span>
I don't see an option to change this, seems like html-minifier is evaluating that attribute value?
Test sample: https://replit.com/#DanDeancook/Disable-html-minifier-attr-parsing?v=1
Found the culprit, minifyCSS is default true, but documentation on project home page says false.
Set option minifyCSS to false and the template attribute value is kept as is.
Related
Heyo, I'm trying to understand how and when text interpolation works in Angular. It seems to remove certain combinations. Let me give you a few examples:
<img src="{{'test'}}"> //works
<span src="{{'test'}}"></span> //gets removed
<span data-test="test"></span> //works, duh
<span data-test="{{'test'}}"></span> //gets removed
<span [attr.data-test]="'test'"></span> //works
Just to be clear, the DOM will contain all the img and span elements but they won't always have the attributes I defined. Angular just throws some away.
My theory is the following: text interpolation for HTML attributes only works for attributes inserted according to HTML spec. Since <img> supports the src attribute, I can use text interpolation there. <span> doesn't, so it gets removed there. But there's nothing related to this in the docs afaik. So I can't really be sure. How does it work and when does it not?
Edit: the background to my question is that I want to use {{}} as often as possible over attribute binding cause I think it looks nicer. Though I neither have an idea which one performs better nor why text interpolation doesn't always work.
Angular and binding check if the property exists in the element, if it is null or undefined is removed.
Let see each case:
<img src="{{'test'}}"> WORKS because the attribute src is part of the img element.
<span src="{{'test'}}"></span> REMOVED, the attribute src is not part of span and resolves to null or undefined, and angular removes the attribute.
<span data-test="test"></span> WORKS, because the data-test is a standard way to add property and not use binding.
<span data-test="{{'test'}}"></span> REMOVED because the binding check the data property is not part of span, angular check the data-test attribute is not valid and is removed.
<span [attr.data-test]="'test'"></span> WORKS it is the way as angular register the custom attribute attr-data-test and keep and assign the value.
RECAP
For binding attributes, use attribute binding to bind properties and custom attributes.
<img [src]="path"/>
For custom attributes uses:
<img [attr.data-nice]="hello"/>
Feel free to read more https://angular.io/guide/attribute-binding
var bannerText = stringFormat("This is my {0}test content{1} here", "<b>", "</b>");
<div>
<p> {para1}</p>
<p> {bannerText}</p>
</div>
html tags gets printed instead of applying them as text
Observed output
This is my <b>test content</b> here
Needed output
This is my test content here
<div [innerHTML]="bannerText"></div>
However, keep in mind Angular's docs about security, which says Angular recognizes the value as unsafe and automatically sanitizes it, which removes the <script> tag but keeps safe content such as the <b> element..
check the below code it might help you.use innerHtml
document.getElementById("name").innerHTML="This is <u>my test</u> sample"
<div id="name"></div>
.
Observed output This is my <u>test content</u> here
Whatever method you are using is escaping the html e.g. < / > etc.
Fix
You need some version of set HTML.
e.g. React : dangerouslySetInnerHTML, Pure JS: Use innerHTML
Warning
Be careful, setting html exposes your app to XSS : https://en.wikipedia.org/wiki/Cross-site_scripting
I am using neon-animation-pages and I want to see if an attribute is set on one of its child elements. From what I understand you can just add any attribute you want and if it is in the tag it will resolve to true if it doesn't have a value explicity set. For instance:
<neon-animation-pages id="pages">
<div awesome>This one is awesome</div>
<div>This one is not</div>
<div>This one is not</div>
</neon-animation-pages>
Above I created my own attribute called: awesome
In my code I use this:
_onIronSelect: function(){
console.log(this.$.pages.selectedItem.getAttribute('awesome'));
}
The console only spits out 'null' or ' ' depending on whether it has my awesome attribute. I can prob make it work, but I thought it was supposed to resolve to true or false, boolean?
Found this in the docs
Boolean properties are set based on the presence of the attribute: if
the attribute exists at all, the property is set to true, regardless
of the attribute value. If the attribute is absent, the property gets
its default value.
at https://www.polymer-project.org/1.0/docs/devguide/properties.html
So I assume I should be trying to get the value of the selectedItem's property > awesome. How can I do this?
There's an important difference between properties and attributes. Properties are JavaScript properties on the DOM object. Attributes basically provide a string valued key/value database that can be initialized from markup.
The Polymer docs you quoted are talking about properties. If a Polymer element has a property, awesome, listed in the properties object with a type of Boolean, it will deserialize to true or false as described.
This is a service Polymer provides because it's a common pattern for HTML elements. For example, if you set the id attribute on an HTML element, the browser automatically reflects that to the id property. But if you add a generic attribute that that element doesn't know about (like awesome), the attribute isn't reflected as a property.
If you want to test for the presence or absence of an attribute on any element (standard HTML or Polymer), use hasAttribute as #günter-zöchbauer said. According to MDN, getAttribute in all modern browsers returns null when the attribute is absent, but apparently this wasn't always true, so hasAttribute is probably safer, as well as clearer.
https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute
Maybe you want
this.$.pages.selectedItem.hasAttribute('awesome')
This is being used in a Bootstrap Popover.
The live page under development can be viewed here
This is got to be simple but I can't find it anywhere. Within data-content attribute I want to force a paragraph or line break between "Date Assessed: 10-Nov-13 and Results: CR= ...
Using a BR or P tag doesn't work it shows the literal tag. In Javascript to force a line break you use \n how do you do the same in HTML within a quoted string?
<td class="setWidth concat"><div class="boldTitle"><a href="#"
class="tip" rel="popover" data-trigger="hover"
data-placement="top"
data-content="Date Assessed: 10-Nov-13 <br />
Results: Cr = 2.2 mg/dl"
data-original-title="Out of Range">
<span style="color:red"
class="glyphicon glyphicon-warning-sign"></span> Cr = 2.2 mg/dL</a></div></td>
See last update: Bootstrap gives you ability to specify that the content is HTML instead of text.
It depends entirely on bootstrap's implementation of the popover effect. If they are using $('.popover').html($(this).data('content')) then it should "just work". If they are using $('.popover').text($(this).data('content')) or otherwise escaping the results of the data-attribute first, then it probably won't.
If bootstrap's implementation isn't working the way you want it to work, you might be served better by writing your own javascript to handle the effect you're looking for.
See this fiddle for an example of a line break from a data-attribute working correctly:
http://jsfiddle.net/g32tw/1/
Update: I've updated the fiddle with a second link that produces the error you're experiencing, which is likely how bootstrap's implementation works.
UPDATE: just looked at bootstrap's documentation. Have you tried adding "data-html" = "true" to the element?
Source: http://getbootstrap.com/javascript/#popovers-usage
Watch out with this - if the content is end-user-supplied using the html option might subject you to XSS attack vulnerabilities. If you trust the data it's fine. See https://www.acunetix.com/websitesecurity/cross-site-scripting/ for information about cross-site scripting.
I am not sure that you can. You could try to have two data items:
data-assessdate="Date Assessed: 10-Nov-13"
data-results="Cr = 2.2 mg/dl"
and reassemble afterward with Javascript before displaying:
var summary = this.dataset;
var newhtml=summary.assessdate . "<br />" . summary.results;
and then write newhtml to the DOM where ever you want.
Working with Polymer Project markup, the <element> and <polymer-element> tags take an attribute called attributes to publish things in the custom element (1).
This causes problems in jade, since since #617 attributes as an attribute name is treated specially. Is there a workaround for this in Jade?
After the recent update to jade (v1.0.0 and greater) attributes is no longer special cased. As such you can just write:
polymer-element(attributes='foo bar')
results in:
<polymer-element attributes="foo bar"></polymer-element>
If you want to try it out in your browser you can do so at: http://jade-lang.com/demo/
Just put a '\' before the attributes-attribute, like so
polymer-element(\attributes='foo bar')
It was just a guess, but it worked. Can't find any reference in the documentation on this.
So consider it as a work around.
I don't know if this helps in your particular situation, but note that you can use an object property called publish in your prototype in place of the attributes attribute on the <polymer-element>.
E.g.
<polymer-element attributes='foo bar'...>...
is equivalent to
<polymer-element...>...
<script>
Polymer(..., {
publish: {
foo: null,
bar: null
}
}
That way you should be able, at least, to write your own elements without bumping into Jade syntax.
Just to keep this answer up-to-date, attributes is no more reserved in jade :).