A template tells Angular how to render the component's view. Templates are HTML snippets with the specific Angular's template syntax, such as interpolation, property, attribute, and event bindings, built-in directives, and pipes to mention just a few. We will give you a quick overview of the template syntax starting with interpolation. Interpolation is used to evaluate expressions in double curly braces. The evaluated expression is then converted to a string. The expression can contain any mathematical calculations, component's properties and methods, and many more:
<p>Selected car is {{currentCar.model}}</p>
Angular evaluates template expressions after every change detection cycle. Change detection cycles are triggered by many asynchronous activities such as HTTP responses, key and mouse events, and many more. The next fundamental template syntax is related to various bindings. Property binding sets an element property to a component property value. The element property is defined in square brackets:
<img [src]="imageUrl">
<button [disabled]="formValid">Submit</button>
Here, imageUrl and formValid are a component's properties. Note that this is a one-way binding because the data flow occurs in one direction, from the component's properties into target element properties. Attribute binding allows us to set an attribute. This kind of binding is used when there is no element property to bind. The attribute binding uses square brackets too. The attribute name itself is prefixed with attr., for example, consider ARIA attributes for web accessibility:
<button [attr.aria-expanded]="expanded" [attr.aria-controls]="controls">
Click me
</button>
User interactions result in a data flow from an element to a component. In Angular, we can listen for certain key, mouse, and touch events by means of event binding. The event binding syntax consists of a target event name within parentheses on the left and a quoted template statement on the right. In particular, you can call a component's method. In the next code snippet, the onSave() method is called on a click:
<button (click)="onSave()">Save</button>
The method (generally template statement) gets a parameter--an event object named $event. For native HTML elements and events, $event is a DOM event object:
<input [value]="name" (input)="name=$event.target.value">
Two-way binding is possible as well. The [(value)] syntax combines the brackets of property binding with the parentheses of event binding. Angular's directive NgModel is best suited for the two-way binding on native or custom input elements. Consider the following sample:
<input [(ngModel)]="username">
Is equivalent to:
<input [value]="username" (input)="username=$event.target.value">
Two-way binding in a nutshell: a property gets displayed and updated at the same time when the user makes changes. A template reference variable is another example of handy template syntax. You can declare a variable with the hash symbol (#) on any DOM element and reference this variable anywhere in the template. The next example shows the username variable declared on an input element. This reference variable is consumed on a button--it is used to get an input value for the onclick handler:
<input #username>
<button (click)="submit(username.value)">Ok</button>
A template reference variable can also be set to a directive. A typical example is the NgForm directive which provides useful details about the form elements. You can, for example, disable the submit button if the form is not valid (required fields are not filled in and so on):
<form #someForm="ngForm">
<input name="name" required [(ngModel)]="name">
...
<button type="submit" [disabled]="!someForm.form.valid">Ok</button>
</form>
Last but not least, the pipe operator (|). It is used for the transformation of the expression's result. The pipe operator passes the result of an expression on the left to a pipe function on the right. For example, the pipe date formats JavaScript Date object according to the specified format (https://angular.io/docs/ts/latest/api/common/index/DatePipe-pipe.html):
Release date: {{releaseDate | date: 'longDate'}}
// Output: "August 30, 2017"
Multiple chained pipes can be applied as well.
