All the popular frameworks used in the world of front-end development have different approaches to the tools offered for development. However, almost all frameworks focus on providing as much encapsulation as possible. More encapsulation would mean that the developer does not need to worry about nitty-gritty details and the client does not see what they don’t need to see. This leads to a smoother development and an easy-to-understand view of the application to the client. The popular front-end development framework Angular exhibits this principle in many different ways. One of the most prominent examples being through the use of templates.

This article explains what templates are and how Angular uses them to further streamline the front-end development process. Through templates, a developer is able to keep the graphical layout of an aspect of the Angular application separate from its working logic. However, communication between the graphical and logical parts is still possible. This article will take you through to make use of these templates and some of the more advanced functionality they can offer.

Understanding Angular Templates

Before moving on to discussing templates, it is important to grasp what Angular components are. After all, a template is an integral part of a component. Through components, we will be able to better understand the purpose and workings of a template.

At the fundamental level of any Angular application lies a tree of components. Each bigger component is connected to a child component(s) that it can pass data on to and invoke the creation of. Each component is associated with a certain functionality of the application and this modular nature helps with a more sophisticated development process. The Angular component is self-contained, in the sense that it consists of the working logic for the functionality and its visual representation. While the former is defined through a class, the latter is done through a template.

import { Component, OnInit } from '@angular/core';

@Component({
	selector: 'ang_example_app',
	templateUrl: './component.example.html',
	styleUrls: ['./component.example.css']
})

export class AngExample implements OnInit {
	constructor() { }
}

The template is simply HTML code that defines the visual rendering of a certain view or functionality. This code can be included as a reference to a file in the same directory (templateUrl shown in the above example) or as inline code within the @Component decorator. All sorts of HTML code is valid template code and tags like <head> or <body> are not needed because only a specific part of a webpage is being developed.

Templates allow for much more functionality than regular HTML. Templates can be used to include interactive vector graphics (in SVG format) in the webpage. There are certain template statements that can be used in the HTML file to respond to user events and call methods defined within the component. Except that, there are also template expressions that are used to bind data to an HTML element or directive, explained later in the article.

Setting Up And Using Angular Templates

Including templates in Angular is fairly straightforward. As shown in the example in the previous section, the template included is an HTML file present in the same directory. Given below is an example of inline code specifying the template for the component.

import {Component} from '@angular/core';

@Component({
	selector: 'ang-component',
	template: `
<div>
	<h4>{{title}}</h4>
</div>
`
})

export class Ang_Component {
	constructor() {
		this.title = 'Angular Component';
	}
}

Templates can be used to achieve various different forms of data bindings. The simplest form can be seen in the above example where double curly brackets in the template are used to refer to a variable in the class. This can also be used to call methods defined in the class. As mentioned before, user events can be bound with certain component behaviour as well. An example of this is seen below.

<button (click)="onClick()">Click Here</button>

Here, onClick() is a method defined on the component and is invoked on the click of the ‘Click Here’ button, as specified by (click)=.The use of the equality operator like that is supported by template statements discussed before.

Through templates, properties of components are bound with each other as well. This helps implement the data communication between parent and child components. As shown below, the <item-select> is there to specify the child component through its selector directive within the parent component’s template code. Further on, the item property of the child component is set to the value of currentItem in the parent component.

<item-select [item]="currentItem"></item-select>

Transforming Data In Templates Through Pipes

Pipes are used to transform and shape some data into a particular form before further processing or rendering. This data could be in the form of dates or some currency. Instead of writing long lines of code, one can use the relevant type of pipe to transform a string into a particular type of data. Some of the more popular types of pipes are:

DatePipe
CurrencyPipe
DecimalPipe

Pipes are invoked by using the | operator. On one side of the operator, the variable or value is kept while the appropriate function name is given on the other side. Following is an example of using pipes in templates. The birthday variable’s value is passed by the operator onto the date function, which then formats it into a particular format.

<p>The hero's birthday is {{ birthday | date:"MM/dd/yy" }}</p>

These pipes can be chained to have multiple formattings in one go. By adding another pipe operator and a function on the other side, one can get the birthday all in lowercase, as per the above example.

The nature of pipes make them easy to test during unit testing of Angular applications. Testing them mainly involves the main transform function that is present in every pipe. This function is tested by going through different kinds of values for its parameters and its testing does not require the Angular testing facilities. Oftentimes, pipes use regular expressions to format the data in a particular way. This makes testing of pipes necessary as these expressions need to be checked and the validity of their out put needs to be observed.

Conclusion

As we saw, templates hold more potential than regular HTML code, thanks to Angular’s capabilities. By separating the visual layout of each component, and each functionality, templates offer significant encapsulation. This kind of encapsulation can prove useful in more complex webpages where there can be a huge number of components interacting. Except that, templates also allow us to use interesting functionalities like pipes or data bindings for dynamic communication between the logic and visuals. The many functionalities of templates allow for something like template-driven forms to exist. These forms use all of these functionalities to gather data mainly through the visual layout and format it accordingly. This data is then used to drive the logic of component(s).

Knowing All About Angular Templates