Previous Articles:

Introduction To Components And Templates Part 1: Component Metadata

Introduction To Components And Templates Part 2: Templates And Views

Introduction To Components And Templates Part 3: Data Binding

Introduction to components and templates Part 4

Pipes

Angular pipes let you declare display-value transformations in your template HTML.

A class with the @Pipe decorator defines a function that transforms input values to output values for display in a view.

Angular defines various pipes, such as the date pipe and currency pipe. 

You can also define new pipes.

To specify a value transformation in an HTML template, use the pipe operator (|).

{{interpolated_value | pipe_name}}

You can chain pipes, sending the output of one pipe function to be transformed by another pipe function.

A pipe can also take arguments that control how it performs its transformation.

For example, you can pass the desired format to the date pipe.

<!-- Default format: output 'Jun 15, 2015'-->
 <p>Today is {{today | date}}</p>

<!-- fullDate format: output 'Monday, June 15, 2015'-->
<p>The date is {{today | date:'fullDate'}}</p>

 <!-- shortTime format: output '9:43 AM'-->
 <p>The time is {{today | date:'shortTime'}}</p>

Directives

Angular templates are dynamic.

When Angular renders them, it transforms the DOM according to the instructions given by directives.

A directive is a class with a @Directive() decorator.

A component is technically a directive.

However, components are so distinctive and central to Angular applications that Angular defines the @Component() decorator, which extends the @Directive() decorator with template-oriented features.

In addition to components, there are two other kinds of directives:

1. structural and

2. attribute.

Angular defines a number of directives of both kinds, and you can define your own using the @Directive() decorator.

Just as for components, the metadata for a directive associates the decorated class with a selector element that you use to insert it into HTML.

In templates, directives typically appear within an element tag as attributes, either by name or as the target of an assignment or a binding.

Structural directives

Structural directives alter layout by adding, removing, and replacing elements in the DOM.

The example template uses two built-in structural directives to add application logic to how the view is rendered.

<li *ngFor="let hero of heroes"></li>
<app-hero-detail *ngIf="selectedHero"></app-hero-detail>

In the example above, 

*ngFor is an iterative; it tells Angular to stamp out one li per hero in the heroes list.

*ngIf is a conditional; it includes the HeroDetail component only if a selected hero exists.

Attribute directives

Attribute directives alter the appearance or behavior of an existing element.

In templates they look like regular HTML attributes, hence the name.

The ngModel directive, which implements two-way data binding, is an example of an attribute directive.

ngModel modifies the behavior of an existing element (typically input tag) by setting its display value property and responding to change events.

<input [(ngModel)]="hero.name">

Angular has more pre-defined directives that either alter the layout structure (for example, ngSwitch) or modify aspects of DOM elements and components (for example, ngStyle and ngClass).

Credit: Angular.io