Angular 2 Data Binding

 

Data binding is the mechanism used to ensure the linking between what a user see on the screen and the data value in our class. (Front <-> Back)

Angular 2 uses a Framework to manage the Data binding.

All what you need to do is to declare the binding between a source and a target.

Example : <input type=’’Text’’ [(target)] = “expression” value=’myData’>

Angular 2 data binding
Angular 2 data binding

 

In Angular 2 we deal with properties not attributes.

 

Properties Not Attributes
Properties Not Attributes

 

Attributes are defined by the HTML. Properties are defined by the DOM.

Attributes: are used for initialization (the value of an attribute can’t be changed)

Properties: are used for programmatically setting values.

Example Attribute : <input type=”text” value=”text1” disabled>

Example Property : <input type=”text” value=”text2” [disabled]=”isDisabled”>

Keep in Mind: Template binding deals with properties not attributes.

 

  <input type="text" [value]="myName">
  <button (click)="colorChange(textColor)" [style.color]="textColor">Change My Color</button>
  <input type="text" [(ngModel)]="textColor">

  <table border=2>
      <!--  expression calculates colspan=2 -->
      <tr><td [attr.colspan]="1 + 1 + 1">Left - Center - Right</td></tr>
      <tr><td>1</td><td>2</td><td>3</td></tr>
   </table>
 

 

3 kinds of Data Binding Directions
3 kinds of Data Binding Directions

 

  • One-way (from data to view –>):

Interpolation : {{expression}}
Property           :  [target]
Attribute          : [attr.]
Class                   : [class.]
Style                    :[style.]

  • One-way (from view to data <–)

Event   : (click)= ‘’expression ‘’

  • Two-way (<—->)

Two-way   : [(target)] = “expression

 

Two possible Syntaxes
Two possible Syntaxes

 

We have two possible Syntaxes:

  • Syntax 1 – {{}} :

Interpolation: {{expression}}

  • Syntax 2 –  target= ‘’expression‘’ :

The target can be in one of these forms:

[target]                Example : [value] is an input

(target)               Example : (click)   is an output

[(target)]              Example : [(ngModel)] is a two-way

OR

bind-target        Example : [src] or bind-src are the same.

on-target            Example :

bindon-target Example :

 

  • The Target can be (an element, a component or a directive) Property.
  • The Target can be(an element, a component or a directive) Event.

 

 6 Binding Types
6 Binding Types

 

We list 6 Binding types: Property, Event, Two-way, Class, Style, Attribute.

 

  • You want to change programmatically the value of a HTML input element <input> Property, with the value from the class property (=“expression”). In this case you use a property binding.
Binding type Property
The Target Property of an Element
Example <input type=”text” [value]=”myName”>
  • You want to change programmatically the value of a component < angular-2-syntax > Property, with the value from the class property (=“expression”). In this case you use a property binding.

 

Binding type Property
The Target Property of a Component
Example <angular-2-syntax [myName]=”myNameFromMother”>loading…</angular-2-syntax>
  • You want to change programmatically the value of a directive [ngClass] Property, with the value from the class property (=“expression”). In this case you use a property binding.
Binding type Property
The Target Property of Directive
Example <span [ngClass]=”configClasses()”>Angular 2 ngClass directive</span>
  • We can bind a target event (e.g. click) to an element.
Binding type Event
The Target Element event
Example <p (click)=”changeMyColor()” style=”color:{{textColor}}”>Angular 2 Color Change</p>
  • We can bind a component custom event (e.g. onColorChange)
Binding type Event
The Target Component event
Example <angular-2-syntax [myName]=”myNameFromMother” (onColorChange)=”onColorChange($event)”>loading…</angular-2-syntax>
  • We can bind a directive custom event (e.g. myPrivClick)
Binding type Event
The Target Directive event
Example <div (myPrivClick)=”clicked=$event”>Click event</div>
Binding type Two-way
The Target Event and Property
Example <input type=”text” [(ngModel)]=”textColor”>
  • We can add or remove a class name to an element using this syntax [class.]
Binding type Class
The Target class Property
Example <span [class.successClass]=”isSuccess”>Angular 2 single css class</span>
  • We can add or remove a style name to an element using this syntax [class.]
Binding type Style
The Target style Property
Example <span [style.fontColor]=”isSuccess ? ‘blue’ : ‘black'”>Angular 2 single css class</span>
  • We can set some attributes values using the syntax
Binding type Attribute
The Target Attribute (when Angular 2 Property is not available)
Example <table border=2>

<!– expression calculates colspan=2 –>

<tr><td [attr.colspan]=”1 + 1 + 1″>Left – Center – Right</td></tr>

<tr><td>1</td><td>2</td><td>3</td></tr>

</table>

Attribute? [attr.]

 Yes. To bind Attributes use this sysntax attr.colspan

Rarely: when we don’t have the corresponding Property in Angular 2 we can use the HTML attribute : )

 

Fixed string initialization
Fixed string initialization

 

  • We can set a fixed value to a property by using this syntax (no brackets):

initData is a property in our class. initData:string;

<angular-2-syntax  myFixedValue="initData">loading...</angular-2-syntax>

 

Done !