Side effect-free binding expressions
If a function is used in a binding expression, it should be side effect-free. Consider yet another binding:
<div [innerHTML]="getContent()"></div>
And the underlying function, getContent:
getContent() {
var content=buildContent();
this.timesContentRequested +=1;
return content;
}
The getContent call changes the state of the component by updating the timesContentRequested property every time it is called. If this property is used in views such as:
<div>{{timesContentRequested}}</div>
Angular throws errors such as:
Expression '{{getContent()}}' in AppComponent@0:4' has changed after it was checked. Previous value: '1'. Current value: '2'
The Angular framework works in two modes, dev and production. If we enable production mode in the application, the preceding error does not show up. Look at the framework documentation at http://bit.ly/enableProdMode for more details.
The bottom line is that your expression used inside property binding should be side effect-free.
Let's now look at something interesting, [ngStyle], which looks like a property binding, but it's not. The target specified in [] is not a component/element property (div does not have an ngStyle property), it's a directive.
Two new concepts need to be introduced, target selection and directives.