Most modern JavaScript frameworks today come with strong model-view binding support, and Angular is no different. The primary aim of any binding infrastructure is to reduce the boilerplate code that a developer needs to write to keep the model and view in sync. A robust binding infrastructure is always declarative and terse.

The Angular binding infrastructure allows us to transform template (raw) HTML into a live view that is bound to model data. Based on the binding constructs used, data can flow and be synced in both directions: from model to view and view to model.

The link between the component's model and its view is established using the template or templateUrl property of the @Component decorator. With the exception of the script tag, almost any piece of HTML can act as a template for the Angular binding infrastructure.

To make this binding magic work, Angular needs to take the view template, compile it, link it to the model data, and keep it in sync with model updates without the need for any custom boilerplate synchronization code.

Based on the data flow direction, these bindings can be of three types:

Let's understand how to utilize the binding capabilities of Angular to support view templatization. Angular provides these binding constructs:

This is a good time to learn about all these binding constructs. Interpolation is the first one.

Interpolations are quite simple. The expression (commonly known as a template expression) inside the interpolation symbols ({{ }}) is evaluated in the context of the model (or the component class members), and the outcome of the evaluation (string) is embedded in HTML. A handy framework construct to display a component's data/properties. We render the exercise title and the exercise time remaining using interpolation:

<h1>{{currentExercise.exercise.title}}</h1>
... 
<h1>Time Remaining: {{currentExercise.duration?-exerciseRunningDuration}}</h1> 

Remember that interpolations synchronize model changes with the view. Interpolation is one way of binding from a model to a view.

Interpolations, in fact, are a special case of property binding, which allows us to bind any HTML element/component properties to a model. We will shortly discuss how an interpolation can be written using property binding syntax. Consider interpolation as syntactical sugar over property binding.

Property bindings allow us to bind native HTML/component properties to the component's model and keep them in sync (from model->view). Let's look at property binding from a different context.

Look at this view excerpt from the 7 Minute Workout's component view (workout-runner.component.html):

<img class="img-responsive" [src]="'/static/images/' + currentExercise.exercise.image" /> 

It seems that we are setting the src attribute of img to an expression that gets evaluated at runtime. But are we really binding to an attribute? Or is this a property? Are properties and attributes different?

In Angular realms, while the preceding syntax looks like it is setting an HTML element's attribute, it is, in fact, doing property binding. Moreover, since many of us are not aware of the difference between an HTML element's properties and its attributes, this statement is very confusing. Therefore, before we look at how property bindings work, let's try to grasp the difference between an element's property and its attribute.

<input type="text" value="Awesome Angular"> 

input.value // value property 

input.getAttribute('value')  // value attribute 

<img class="img-responsive" [src]="'/static/images/' + currentExercise.exercise.image" /> 

[target]="sourceExpression"; 

<workout-runner [exerciseRestDuration]="restDuration"></workout-runner> 

<h3>Main heading - {{heading}}</h3> 
<h3 [text-content]="' Main heading - '+ heading"></h3>

<img [src]="'/assets/images/' + currentExercise.exercise.image" />
<img src="/assets/images/{{currentExercise.exercise.image}}" />      // interpolation on attribute

<span [text-content]="helpText"></span>
<span>{{helpText}}</span>

<div>{{doLotsOfWork()}}</div> 

<div [innerHTML]="getContent()"></div> 

getContent() { 
  var content=buildContent(); 
  this.timesContentRequested +=1; 
  return content; 
} 

<div>{{timesContentRequested}}</div> 

Expression '{{getContent()}}' in AppComponent@0:4' has changed after it was checked. Previous value: '1'. Current value: '2'

<div class="progress-bar" role="progressbar"  
 [ngStyle] = "{'width':(exerciseRunningDuration/currentExercise.duration) * 100 + '%'}"></div>  

<div [ngStyle]='expression'></div> 

The only reason attribute binding exists in Angular is that there are HTML attributes that do not have a backing DOM property. The colspan and aria attributes are some good examples of attributes without backing properties. The progress bar div in our view uses attribute binding.

The 7 Minute Workout uses attribute binding at two places, [attr.aria-valuenow] and [attr.aria-valuemax]. We may ask a question: can we use standard interpolation syntax to set an attribute? No, that does not work! Let's try it: open workout-runner.component.html and replace the two aria attributes attr.aria-valuenow and attr.aria-valuemax enclosed in [] with this highlighted code:

<div class="progress-bar" role="progressbar"  
    aria-valuenow = "{{exerciseRunningDuration}}"  
    aria-valuemin="0"  
    aria-valuemax= "{{currentExercise.duration}}"  ...> </div> 

Save the view and if the app is not running, run it. This error will pop up in the browser console:

Can't bind to 'ariaValuenow' since it isn't a known native property in WorkoutRunnerComponent ... 

Angular is trying to search for a property called ariaValuenow in the div that does not exist! Remember, interpolations are actually property bindings.

We hope that this gets the point across: to bind to an HTML attribute, use attribute binding.

To support attribute binding, Angular uses a prefix notation, attr, within []. An attribute binding looks as follows:

[attr.attribute-name]="expression" 

Revert to the original aria setup to make attribute binding work:

<div ... [attr.aria-valuenow]="exerciseRunningDuration" 
    [attr.aria-valuemax]="currentExercise.duration" ...> 

While we have not used style and class-based binding in our workout view, these are some binding capabilities that can come in handy. Hence, they are worth exploring.

We use class binding to set and remove a specific class based on the component state, as follows:

[class.class-name]="expression" 

This adds class-name when expression is true and removes it when it is false. A simple example can look as follows:

<div [class.highlight]="isPreferred">Jim</div> // Toggles the highlight class 

Use style bindings to set inline styles based on the component state:

[style.style-name]="expression";

While we have used the ngStyle directive for the workout view, we could have easily used style binding as well, as we are dealing with a single style. With style binding, the same ngStyle expression would become the following:

[style.width.%]="(exerciseRunningDuration/currentExercise.duration) * 100" 

width is a style, and since it takes units too, we extend our target expression to include the % symbol.

Earlier in the chapter, we formally introduced directives and their classifications. One of the directives types, attribute directives (again, don't confuse them with attribute binding, which we introduced in the preceding section) are the focus of our attention in the next section.

Attribute directives are HTML extensions that change the look, feel or behavior of a component/element. As described in the section on Angular directives, these directives do not define their own view.

Other than ngStyle and ngClass directives, there are a few more attribute directives that are part of the core framework. ngValue, ngModel, ngSelectOptions, ngControl, and ngFormControl are some of the attribute directives that Angular provides.

Since 7 Minute Workout uses the ngStyle directive, it would be wise to dwell more on this directive and its close associate ngClass.

Angular has two excellent directives that allow us to dynamically set styles on any element and toggle CSS classes. For the bootstrap progress bar, we use the ngStyle directive to dynamically set the element's style, width, as the exercise progresses:

<div class="progress-bar" role="progressbar" ... 
    [ngStyle]="{'width':(exerciseRunningDuration/currentExercise.duration) * 100 + '%'}"> </div> 

ngStyle allows us to bind one or more styles to a component's properties at once. It takes an object as a parameter. Each property name on the object is the style name, and the value is the Angular expression bound to that property, such as the following example:

<div [ngStyle]= "{ 
'width':componentWidth,  
'height':componentHeight,  
'font-size': 'larger',  
'font-weight': ifRequired ? 'bold': 'normal' }"></div> 

The styles can not only bind to component properties (componentWidth and componentHeight), but also be set to a constant value ('larger'). The expression parser also allows the use of the ternary operator (?:); check out isRequired.

If styles become too unwieldy in HTML, we also have the option of writing in our component a function that returns the object hash, and setting that as an expression:

<div [ngStyle]= "getStyles()"></div> 

Moreover, getStyles on the component looks as follows:

getStyles () { 
    return { 
      'width':componentWidth, 
      ... 
    } 
} 

ngClass works on the same lines too, except that it is used to toggle one or multiple classes. For example, check out the following code:

<div [ngClass]= "{'required':inputRequired, 'email':whenEmail}"></div> 

The required class is applied when inputRequired is true and is removed when it evaluates to false.

Well! That covers everything we had to learn about our newly developed view.

Time to add some enhancements and learn a bit more about the framework!