Differences between Angular 1 and Angular 2 : Templates

Templates in Angular are written using HTML Tags that contain Angular specific elements and attributes. Angular understands the HTML with information from model and the controller to render the view to the user.

There are a number of conceptual and syntactical differences between AngularJS 1.x and Angular 2. In this post lets try to understand the differences in using templates in Angular 1 and Angular 2.

Binding / Interpolation

In Angular 1.x, an expression in curly braces denotes one-way binding. This binds the value of the element to a property in the controller associated with this template. When using the controller as syntax, the binding is prefixed with the controller alias (vm) because we have to be specific about the source of the binding.
In Angular 2, a template expression in curly braces still denotes one-way binding. This binds the value of the element to a property of the component. The context of the binding is implied and is always the associated component, so it needs no reference variable.

Filters / Pipes

The filters that we have used in Angular 1 are almost the same in Angular 2 but, are now called as Pipes

To filter output in our templates in Angular 1, we use the pipe character (|) and one or more filters.

In this example, we filter the title property to uppercase.

In Angular 2, we use similar syntax with the pipe (|) character to filter output, but now we call them pipes. Many (but not all) of the built-in filters from Angular 1 are built-in pipes in Angular 2.


Local Variables / Input Variables

In Angular 1.x, local variables are usually user defined but we have true template input variables in Angular 2.

Here, movie is a user-defined local variable.
What we have in Angular 2 is almost similar but, we have true template input variables that are explicitly defined using the let keyword.