Templates

Templates are one of the key features in AngularJS. They are simple HTML and do not require any intermediate translation, unlike most template engines, such as mustache. Templates in Angular combine simplicity with power by allowing us to extend HTML by creating an internal Domain-Specific Language (DSL) inside it, with custom elements and attributes.

This is one of the main purposes of web components as well. We already mentioned how and why Angular takes advantage of this new technology. Although AngularJS templates are great, they can still get better! The new Angular templates took the best from the past and enhanced it by fixing some of the confusing parts.

For example, let's say we have a directive and we want to allow the user to pass a property to it using an attribute. In AngularJS, we can approach this in the following three different ways:

<user name="literal"></user> 
<user name="expression"></user> 
<user name="{{interpolate}}"></user> 

In the user directive, we pass the name property using three different approaches. We can either pass a literal (in this case, the "literal" string), a string, which will be evaluated as an expression (in our case "expression"), or an expression inside, {{ }}. Which syntax should be used completely depends on the implementation of the directive, which makes its API tangled and hard to remember.

Dealing with a large amount of components with different design decisions on a daily basis is a frustrating task. By introducing a common convention, we can handle such problems. However, in order to have good results and consistent APIs, the entire community needs to agree with it.

Angular deals with this problem by providing a special syntax for attributes, whose values need to be evaluated in the context of the current component, and a different syntax for passing literals.

Another thing we're used to, based on our AngularJS experience, is the microsyntax in template directives, such as ng-if and ng-for. For instance, if we want to iterate over a list of users and display their names in AngularJS, we can use this:

<div ng-for="user in users">{{user.name}}</div> 

Although this syntax looks intuitive to us, it allows limited tooling support. However, Angular approached this differently by bringing a little bit more explicit syntax with richer semantics:

<ng-template ngFor let-user [ngForOf]="users"> 
  {{user.name}} 
</ng-template> 

The preceding snippet explicitly defines the property, which has to be created in the context of the current iteration (user), and the one we iterate over (users).

Since this syntax is too verbose for typing, developers can use the following syntax, which later gets translated to the more verbose one:

<li *ngFor="let user of users"> 
  {{user.name}} 
</li> 

The improvements in the new templates will also allow better tooling for advanced support by text editors and IDEs. We will discuss Angular's templates in Chapter 5, Getting Started with Angular Components and Directives.