CODEWITHSUNDEEP
javascriptangular
undefined
undefined

Reputation: 6884

Angular 2 Input binding vs string change detection

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?

Upvotes: 3

Views: 139

Answers (1)

yurzui
yurzui

Reputation: 214295

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

enter image description here

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.

Upvotes: 2

Related Questions