Inline Templates and ngIf

Sometimes we want to specify a template right inside another component. This is useful for things like:

  • conditional content
  • repeated content

These templates can be passed to directives, which can then render them in a variety of ways.


A directive has a slightly different meaning in Angular 2 to Angular 1. In Angular 2, a directive can be thought of as a compiler directive. It extends the DOM compiler, giving you more options.

In Angular 2 a directive is just a component without a template. It operates on the current Element or Component, changing its behaviour, adding listeners, DOM properties, etc.

Later, we will build a directive of our own.

Making a template

We create a template using the <template> tag. If we append a <template> tag to a component template, it will not be output and all the content in it will be ignored.


To make this template do something, we pass it to a directive such as ngIf.

This directive will completely remove an element from the DOM if an expression is falsey, or append a clone if it is truthy. We set a property on the template to activate the directive:

<a on-click="visible = !visible">Click</a>
<template [ngIf]="visible">This is the template</template>

We also have a slightly strange, albeit convenient shorthand. We can write this instead:

<div *ngIf="visible">This is the template</div>

The entire div will become the template and will be injected into the ngIf directive.

Exercise - Payment widget

We are going to create a little payment widget, like this:

<option value='visa'>Visa</option>
<option value='mastercard'>Mastercard</option>
<label>Start Date:</label><input type='date' />
<label>End Date:</label><input type='date' />
<label>CVC:</label><input type='number' />
<button>Purchase the Cheese</button>

The user can choose Visa or Mastercard from a dropdown.

If they select Mastercard, show the start date, end date fields. If they choose Visa, show the CVC field.

Harder Extension - automatically selecting Visa or Mastercard

Refer to this SO answer:

Write a small function that Parses the first digits of the card number to automatically select Visa or Mastercard. Bind [value] on the select.

comments powered by Disqus