Angular 2 Input binding vs string change detection

Question

Let's say I have the following component:

class TestComponent {
  @Input() title;
}

Is there a difference regarding change detection between using it with brackets and without brackets?

<test [title]="title"></test>
<test [title]="'Component Title'"></test>  
<test title="Component Title"></test> 

To be more accurate, the static version, will be checked with every change detection, too?

Answer 1

Since you declared @Input Angular will create bindings for all of them. It will add it to updateDirectives function that is called during change detection cycle.

So the following

<test [title]="title"></test>
<test [title]="'Title2'"></test>
<test title="Title3"></test>

will be presented as:

updateDirective(_ck, v) {
  var _co = _v.component;
  var currVal_1 = _co.title;
  _ck(_v,4,0,currVal_1);
  var currVal_2 = 'Title2';
  _ck(_v,7,0,currVal_2);
  var currVal_3 = 'Title3';
  _ck(_v,10,0,currVal_3);
}

Live Example

The main difference here is that angular read @Input binding and also create attribute for title="Title3"case. If you don't declare @Input then only attribute will be created.