I noticed it's possible to property bind stuff without brackets. What is the difference?
Typescript:
import { Component, Input } from '@angular/core';
@Component( {
selector: 'my-comp',
templateUrl: `
input is {{foo}}
`
})
export class myComponent {
@Input() public foo: string;
constructor() { }
}
HTML:
Case 1
<my-comp [foo]="bar"></my-comp>
Case 2
<my-comp foo="bar"></my-comp>
You can omit the brackets when all of the following conditions meet: The target property accepts a string value. The string is a fixed value. The initial value never changes.
Property binding is the same thing as interpolation, except you can set the properties and attributes of various HTML elements. Event binding allows you to define events that occur in the template (user-initiated), and communicate to the component class.
To bind to an element's property, enclose it in square brackets, [] , which identifies the property as a target property. A target property is the DOM property to which you want to assign a value.
Property binding is the base method of binding in Angular, it involves binding values to DOM properties of HTML elements. It is a one-way binding method, as values go from the component to the template layer and changes made in the component updates the properties bound in the template.
In general, we can say that we should use bindings without brackets only when we have a fixed string property:
From the docs:
You should omit the brackets when all of the following are true:
- The target property accepts a string value.
- The string is a fixed value that you can bake into the template.
- This initial value never changes.
You routinely initialize attributes this way in standard HTML, and it works just as well for directive and component property initialization.
When setting an element property to a non-string data value, you must use property binding.
All in all, that means that the value on the right only gets interpreted when using brackets. You can remove the brackets whenever you see quotes in quotes on the right: [anyStringProperty]="'hello'"
can be changed to anyStringProperty = "hello"
.
So, property binding without square brackets is possible as long as we also omit the single quotation marks between the double quotation marks when passing down a string.
There are some Cases where we need to add like this html attributes dynamically might be and example which comes json from api request
Case 1 []
known as Property Binding
<my-comp [foo]="data.bar"></my-comp>
Case 2 {{ }}
known as Interpolation
<my-comp foo="{{data.bar}}"></my-comp>
Case 3 Conditional handling
<my-comp [attr.foo]="data.bar ? true : false"></my-comp>
Both {{ }} called as Interpolation and [] called as Property Binding means angular understand that there is One-way from data source to view target.
For more visit www.codementor.io
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With