In my last post I went through the event binding syntax in Angular 2. This post details property binding syntax …

Property binding is where data flows from the component’s model into the component’s template to set a DOM property or an angular directive. The basic syntax for property binding is …

[propertyName] = "expression";

… where propertyName is a DOM property name or a directive name and an expression is an angular template expression. An angular template expression is just a JavaScript expression with a few exceptions.

In the example below, the agree checkbox is disabled until a name > 2 characters is entered. The name text box is green when > 2 characters and otherwise red. The submit button is disabled until the agree checkbox is ticked.

There are better ways to acheive this behaviour but the example demonstrates property binding in angular 2

#dom #angular #property binding syntax #javascript