Angular Bindings – Deep Dive

Angular data binding allows you to connect the application data to the UI in a concise manner, updating in either direction as required. This article covers:


How and when to use the different forms of data binding

  1. Interpolation {{…}}
  2. Property binding [property] =”…”
  3. Event binding (event) = “…”
  4. Two-way data binding [(…)]=”…”

Interpolation

This allows injection of dynamic strings into the HTML text. It’s syntax is {{…}}

Examples
//display the component property string value 
<h1> Welcome {{useName}}!</h1>
//evaluate 1+2 and display "3"
<p> The sum of 1 + 2 = {{1+2}} </p>
//set the img tag, src attribute
<img src = {{imgUrl}} >
Interpolation syntax
//evaluated and converted to a string
{{ template expression }}
Style Guidelines

You can use functions eg. getVal() and complex logic with some restrictions, but as good practice: keep it simple, executing quickly and Impotent.

Restrictions

The template expression is not allowed to promote side effects, so the following is not allowed  (incomplete list)

  • assignments(=, +=, …)
  • new
  • chaining expressions with ; or ,
  • increment / decrement operators (++ ,  –)
Notes

It may appear that interpolation syntax is just inserting an evaluated result, but this is not quite true! Interpolation is a special form of property binding.


Property binding

This enables the setting of a property value on a view element. It’s syntax is […]

Examples
//set the <img> tag's src property
<img [src] = "imageUrl >
//disable a <button> per the Boolean value isUnchanged 
<button [disable] = "isUnchanged">Change</button>
// DOM element properties are a more common target
//but Angular directives may also be used eg. NgClass
<div [ngClass]="classes">[ngClass] binding to the classes property</div>

Property binding Syntax
//Set the Binging target to the component property's value
[Binding target] = "component property"
//Make sure it evaluates to the correct value type
Property binding special case syntax: One-time string initialization

The brackets are omitted if the binding target property is:

  • Of type string
  • A fixed value expressed in the template
  • It’s initial value is never changed
//the AppDetailComponent properties: salutation is fixed
// and name is dynamically updated
<app-detail> salutation = "Mr" [name] = "userName"></app-detail>>
Binding to a property or interpolation?

The key is readability period, but stick to a style.

Content Security
//HTML with script tags are NOT allowed to leak into the  
//browser, neither with interpolation nor property binding.
//WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
evilTitle = 'Template <script>alert("evil never sleeps")</script>Syntax';

Event-binding

This is a callback from the UI to the Component code. That is one-way binding from the UI . It’s syntax is (…).

Examples
//the target event (click) is bound to the Component method(Event Handler)
<button (click) = onSubmit()>Submit</button>
//Alternative canonical form
<button on-click = "onSubmit()>Submit</button>
Event-binding Syntax

 

Special Case Syntax: $event and event handling statements

in work…

Special Case: Custom events with EventEmitter

in work…

Notes

Template statements do have side effects – They are expected!

// Example from the Angular documentation
<hero-detail (deleteRequest)="deleteHero($event)" [hero]="currentHero"></hero-detail>
//the parent component binds to the HeroDetailComponent's
//deleteHero() method which uses the parent component hero 
//object passed into the method via $event variable.
//the method deleteHero(Hero) deletes this instance of hero.
//Now that's what I call a side effect! 

Two-way data binding

This is a short hand way of combining two forms of binding into one: property binding from a component code variable to the DOM property (UI property) with event binding from the UI to the component code via a method function event handler. It’s syntax combines the one-way property binding […] = “…” with  the one-way event binding (…) = “…”.

Two-way data binding syntax
//the two, one-way bindings
<input [value] = "myComponentProperty" 
   (input) = "onInputEvent($event) >
//"banana in a box" Angular notation for two-way binding
<input [( ngModel )] = "myComponentProperty" >
Notes

We are using an Angular built-in attribute directive “*NgModel” this is explained later. What you need to know for now is that this represent the data model.
NB. when writing the directive in this case use lowercase prefix form “ngModel”.


Binding to HTML attribute vs. DOM property

The distinction between an HTML attribute and a DOM property is one of the corner stones for understanding how binding in Angular works.

This article explains the important differences

Leave a Reply

Your email address will not be published. Required fields are marked *