Angular 2.0 tutorial: templates with working examples

Angular 2.0 is still beta (I’m using beta.1 here). If you find any difficulties to implement those what’s written in the article (though I will try to keep the article updated always), please post a comment about that. Refer to the github repo for working examples.

In our Angular2 tutorial series we completed various ng2 tutorials. If you have not scaffolded your angular 2 app yet, you can have a look at how to scaffold and make hello world using angular 2.

This article assumes you have basing understanding of template engines and familiar with Angular 1.X or any other MVC framework where templates are used and focuses on how exactly you should different helpers, directives etc in Angular 2 templates. The article also assumes that you know how to write a basic ng 2 app.

About examples

An working copy of the example given in the article, can be found on the github repo ng-examples. You can simply clone and download and in your terminal or command prompt just run the command live-server.

Data printing

We are well aware of double curly braces and Angular 2.0 also went with the similar approach for data printing.



Events and refs

As now we know the very basic step of templating; i.e. printing values, it’s time to deal with events and another thing called refs, which is nothing but something like a variable to point to an element.



You can give a name to any of the element with a hash prefix; and once you named it, you can use it anywhere inside that template.

Remember you can not use snake case names for your ref.

Value, attribute, class & style

You need to keep in mind that the expression written inside double quotes are executed in the templates if it’s written at the right hand side against any of the expressions below in the left hand side.

input [value]=”myValue”

Alternative : bind-value=”myValue”

value={{myValue}} will also work, but it’s not what you are thinking (check the differences pointed out below). But if you use value=”myValue” this will not execute the “myValue” expression.


title={{titleSentence}} will also work, but not exactly how you are thinking (check the differences point below). But title=”titleSentence” won’t execute the expression titleSentence.


Here the expression in the rightHand side must return boolean. For a truthy value it will keep that certain class, whereas a falsy value will remove the class.


This is also pretty similar to the other three above.


Well, even though value={{myValue}} is working fine for you, but this is actually not working as you are thinking. If you write anything without the [attr.X], this is considered to be the a property and NOT AN ATTRIBUTE. For input element value is a default property; you just change it to value2={{myValue}} or [value2]=”myValue” and your application will break. A property belongs to the element whereas an attribute belongs to the DOM element.

Built in directives

There are some built in directives to help you to work with very common helpers like, for, if etc. Below are the examples.


You must include the directive NgFor to use *ngFor in your template. Can you see the little asterisk (*) symbol just before ngFor? This is a syntactic thing to declare a template. Using this you are saying that the element in which you used, it itself is a template


The directive NgIf must be included in the component to use ngIf in your template. Here also we are using the asterisk (*) symbol. The reason is just same as ngFor.


Along with the directive NgSwitch you also need to include two other directives NgSwitchWhen and NgSwitchDefault to implement the [ngSwitch] properly.

Here no asterisk (*) sign is used. Rather we explicitly said that this is the template element. Reason is, in case of switch statement, templates can be different for each and every when. Thus it was not possible for Angular 2 to make a common template tag. Thus, in case of switch, explicit declaration of template is required.

Some interesting new comers in Ng 2

There are some really interesting features provided by Angular 2.0. Below are the examples.


I personally consider pipe as a very necessary feature for UI. Because your api should always return the minimal data without considering how it should be displayed on the page. Pipe can modify the display of a certain variable easily. There are some built in types also like date etc.

Apis are also available for custom pipes.

Elvis operator

JavaScript executes a the variable path at runtime and if you write a variable like me.myName.firstName and if myName is undefined or falsy, the code will break there. We write ugly checks to avoid these code breaking. But from now on in Angular 2 apps you can use Elvis operator.

The elvis operator skips the very right property if the left side is undefined or falsy.

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.