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.

import { Component } from "angular2/core";
import { NgClass } from "angular2/common";

@Component({
  selector: "my-app",
  template: `
    <form>
      <div>
        <input
          #nameTextbox
          type="text"
          placeholder="enter your name"
          [ngClass]="nameClass"
          (keyup)="validateName(nameTextbox.value)"
        />
      </div>
      <div>
        <input
          #agreeCheckbox
          type="checkbox"
          [disabled]="!validName"
          (change)="setAgreed(agreeCheckbox.checked)"
        />I agree to ....
      </div>
      <input
        type="submit"
        value="Submit"
        [disabled]="!agreed"
        (click)="submit(nameTextbox.value)"
      />
    </form>
  `,
  styles: [
    `
      .bad {
        background-color: red;
      }
      .good {
        background-color: green;
      }
    `
  ],
  directives: [NgClass]
})
export class AppComponent {
  public validName: boolean;
  public nameClass: string;
  public agreed: boolean;
  validateName(name) {
    if (name.length > 2) {
      this.validName = true;
      this.nameClass = "good";
    } else {
      this.validName = false;
      this.nameClass = "bad";
    }
  }
  setAgreed(agree) {
    this.agreed = agree;
  }
  submit(name) {
    console.log(name);
  }
}

• On line 8, validateName() is called as the user enters a name which in tern sets properties validName and nameClass on lines 29 to 37
• Also on line 8, the ngClass directive is bound to the nameClass property
• On line 9, the checkbox’s disabled property is bound to the opposite of the validName property
• Also on line 9, setAgreed() is called when the checkbox is checked / unchecked which in tern sets the agreed property on line 39
• On line 10, the submit button’s disabled property is bound to the opposite of the agreed property