From Polymer's Anatomy of a data binding
To bind to a property, use the property name in attribute form (dash-case not camelCase), as described in Property name to attribute name mapping:
<my-element my-property="{{hostProperty}}">
To bind to an attribute instead, use the attribute name followed by $:
<a href$="{{hostProperty}}">
But in my code, <div style="background-image: [[getImage(index)]]" class="image-show"></div> works perfectly without $.
Why is this when style is a attribute and not a property(there is no style property defined in the Polymer({}) constructor). Am I working off of a side effect?
Style is a standard HTML attribute. The polymetric way to bind to a style is to use
<div style$="[[myStyle]]">
What you're doing is using a standard style tag with a data-bind to a style property.
On the page you linked, scroll down to the section labeled: Native properties that don't support property binding and you'll see the other attributes that you have to use $= with.
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
I found this in vue component , I didn't understand the purpose of :data-col in div , could you explain please
<template>
<div
class="vertical-layout h-100"
:class="[layoutClasses]"
:data-col="isNavMenuHidden ? '1-column' : null"
>
This is a combination of Vue attribute binding (also known as v-bind) and HTML data-* attribute, along with Tenary operator.
This v-bind and tenary method is a common practice in vue development, especially in conditional rendering.
The purpose of this code is to put the data-col attribute with a value of 1-column on the specified div when the isNavMenuHidden is true
this is a bind attribute and means that data-col is equal to 1-column when 'isNavMenuHidden' is true
MDN says:
If you want default content for your , you enter it between the opening and closing tags. does not support the value attribute.
but in angular property binding we can bind to value.
<textarea rows="10" [value]="'test'" ></textarea>
is there any online repository where we can find all the properties with regard to angular.??
I found the article "HTML Attributes vs DOM Properties and Angular 2 Data Binding" useful, especially the following sections:
DOM is basically collection of objects (window,html,body, head and etc) which allows us to manipulate it. It means that HTML elements are contained in the DOM as objects.HTML elements have attributes which initilizes DOM properties. Once initilization process is done attributes job is done.
<input type=”text” value=”5">
Given input element has type and value attributes. When HTML element is created its properties which have similar names to attributes (but not same thing) is created, too. After initilization given input element have properties such as type and value.
Angular property binding acts on the elements/objects contained in the DOM. You can find a list of properties of all element interfaces at MDN Web APIs documentation. Most of the one's you're interested in, have a name that starts with 'HTML'.
The HTMLTextAreaElement interface for example corresponds to the <textarea> element. You can use all its properties and the properties of its parent interfaces for Angular property binding as long as they're not read only.
I was looking at some Polymer code (link) and stumbled upon something new to me: a dollar sign $ in an html attribute name e.g.
<div class="item" wide-layout$="{{wide}}">
Also, a CSS selector is used:
.item[wide-layout] .title { ... }
How is the $ sign interpreted in the element attribute ?
Thanks for your time folks!
Using $ on the element binds a property to an attribute. You can read more here.
wide in your scenario is probably a Boolean property on the element.
When wide = true, a wide-layout DOM attribute will be added to the element so it can be targeted via CSS.
The dollar sign tells Polymer that some code will change the attribute, may it be class or any specific property on a Polymer element.
The code can be a function or a simple variable.
Example:
<shopping-cart class$="[[colorDependingOnItem(onSale, typeOfBrand)]] row-element">
So the class can now change dynamically depending on what the method colorDependingOnItem returns, based on the two properties onSale and typeOfBrand.
I was going through the Angular 2 documentation and found the following:
<div [hidden]="name.valid || name.pristine"
class="alert alert-danger">
There is no explanation on the [hidden] part. Is it a HTML property, CSS or Angular? Why isn't ng-show used instead?
ng-show is a history of angular1. Before there was no hidden property (standard HTML, it is available starting from ie11) also all standard properties were covered by some similar angular directives which were doing the stuff.
This was a problem because it forced angular programmers to learn lots of directives.
Angular2 idea was to remove all unnecessary directives, and ng-show was one of them. Instead, angular2 introduced a property binding [hidden] which does the same job.
So the answer is: this is standard HTML property utilized by the angular2 property binding.
hidden is a global HTML attribute. The square brackets indicate a property binding. Therefore
[hidden]="name.valid || name.pristine"
means "apply the hidden attribute to this element if the specified control is either valid or pristine". The browser will then render it but with display: none.
You could alternatively use *ngIf to remove the element from the rendered DOM entirely, see e.g. this answer for a comparison.
It's unclear why you reference ng-show, which was part of Angular 1 and no longer exists in 2.