38

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>
Martijn van den Bergh
  • 1,434
  • 1
  • 20
  • 40

4 Answers4

43

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:

  1. The target property accepts a string value.
  2. The string is a fixed value that you can bake into the template.
  3. 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.

Tiago Martins Peres
  • 14,289
  • 18
  • 86
  • 145
seawave_23
  • 1,169
  • 2
  • 12
  • 23
  • 3
    Much more understandable answer. So, omit the brackets seems to be the same as one way binding in AngularJs: ``, isn't it? – scipper Feb 04 '19 at 08:22
11

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

mayur
  • 3,558
  • 23
  • 37
  • 6
    This is no explanation for what the difference is. I was using a framework shortly and some properties needed to be written as bindings, some without brackets. So Why is it like this and what does it mean, not the consequences? – seawave_23 Jan 17 '18 at 08:15
  • @Nadine I have updated the answer with more explanation of the query. – mayur Jan 17 '18 at 09:11
  • But what is then the difference to foo="{{data.bar}}"? It seems that this gets interpreted in some circumstances. – seawave_23 Jan 18 '18 at 08:21
  • @Nadine 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 https://www.codementor.io/adekunleoyaniyi/interpolation-vs-property-binding-in-angular2-eu1tzbyn4 && https://angular.io/guide/template-syntax – mayur Jan 22 '18 at 06:21
  • 1
    Brackets are required to bind a property to some variable. You can omit the square brackets if you are binding the property to a string constant (i.e. not a variable but a hard-coded string). In that sense it acts like a standard HTML attribute (which don't have square brackets). – Rick O'Shea Jul 05 '20 at 21:27
4

From Docs - Remember the brackets:

The brackets, [], tell Angular to evaluate the template expression. If you omit the brackets, Angular treats the string as a constant and initializes the target property with that string.

Flavio Spedaletti
  • 341
  • 3
  • 7
4

There is a small, maybe unimportant situation, but in some cases it can be annoying that you miss it.

Number

Case 1

<my-comp [foo]="90"></my-comp>

Case 2

<my-comp foo="90"></my-comp>

Case 1: typeof foo => 'number'

Case 2: typeof foo => 'string'

Boolean

Case 3

<my-comp [foo]="true"></my-comp>

Case 4

<my-comp foo="true"></my-comp>

Case 3: typeof foo => 'boolean'

Case 4: typeof foo => 'string'

Muhammet Can TONBUL
  • 3,217
  • 3
  • 25
  • 37