An Introduction to Angular Expressions and Filters


Warning: Illegal string offset 'filter' in /var/sites/t/theproactiveprogrammer.com/public_html/wp-includes/taxonomy.php on line 1409

This is the fifth and final part of a series which has looked at the fundamental concepts in Angular at a high level.

Part 1 – An Introduction to Angular Directives

Part 2 – An Introduction to Angular Controllers and Scope

Part 3 – An Introduction to Angular Services

Part 4 – Angular Service Recipes

In this post we will look at Angular expressions and filters, without which we could not display details of our model to the view.

What is an Expression?

The concept of expressions is important in the field of computer science. The following definition from wikipedia tells us what an expression is:

An expression in a programming language is a combination of explicit values, constants, variables, operators, and functions that are interpreted according to the particular rules of precedence and of association for a particular programming language, which computes and then produces (returns, in a stateful environment) another value.

This definition also applies to Angular expressions.

We write expressions in our templates, which are interpreted by the Angular compiler according to its own rules, which then computes and produces another value, which is converted to a string to be displayed by the browser.

The definition from the Angular website is more concise, but still tells us something about Angular expressions:

Angular expressions are JavaScript-like code snippets that are usually placed in bindings such as {{expression}}.

Unsurprisingly, angular expressions are ‘JavaScript-like’, so we can include simple JavaScript syntax in them. In addition, expressions are usually placed in bindings such as {{ expression }}, but more on the double curly brace notation later.

Expressions and Scope

In a previous post we learned how an Angular page consists of a scope hierarchy, and that any point in an Angular template is associated with a specific scope object.

Let’s look again at an example from that post:

Plunker

Whenever we use the double curly brace notation in this way, we tell the Angular compiler to evaluate the contained expression against the scope object corresponding to where we are in the page. In other words, the expression is evaluated against the scope object associated with the surrounding controller, which in turn inherits properties and functions from any parent controllers, and ultimately the root scope.

Unlike regular JavaScript expressions, Angular expressions can’t directly access the global JavaScript namespace. If you need to do this you must explicitly use an appropriate Angular service, such as $window or $location.

The {{ Double Curly Brace }} Notation

We use double curly braces in Angular when we want to bind an expression to an element. This notation is built in to Angular, and is in fact shorthand for the ngBind directive. The above example could be rewritten like this:

Plunker

In addition to placing expressions inside curly braces to display model data, we also use expressions with many Angular directives. For example, the ngClick directive treats its value as an expression. In other words, whatever we place between the double quotes when using the ng-click attribute, will be evaluated against the current scope object – we don’t need to (and shouldn’t) use curly braces. Some directives, such as ngHref, do not treat their value as an expression, therefore in these cases we need to use curly braces if we want to evaluate something from the scope object.

Introducing Filters

To recap then, expressions are what we use when we want to take something from our model (scope object) and display it in our view. But what do we do if we need to format our model value somehow before displaying it?

This is where filters come in.

A filter takes the output of an expression and does something to it before it is displayed. Angular comes with some built-in filters, and we can also create our own custom filters.

The built-in currency filter takes a number and displays it as a currency.

Below, we are declaring that we want to display our basket total as a currency with the £ sign (the default is $).

Plunker

As you can see we apply a filter to an expression using the pipe (|) symbol. We can also chain filters to apply multiple filters to an expression.

Alternatively we can inject and apply a filter inside a controller or service, by adding a suffix of ‘Filter’ to its name:

Plunker

There are a number of other useful filters built-in to Angular.

Custom Filters

The process of creating a custom filter is similar to that of creating a custom directive or a service: we need to register a factory function against a  module, using the filter function.

Plunker

Notice how we are also chaining two filters together here.

Final Words

In this series we have looked at some of the main building blocks of an Angular application: directives, controllers, scope, services, expressions and filters. I have not gone into any real depth on any of these topics, but if you are new to Angular, hopefully there has been enough information to help get you started and encourage you to learn more. I may in future revisit some of the topics covered in this series in more detail. As with all programming languages, the best way to learn is to actually build something. You will notice I have used Plunker throughout to demonstrate working code. Plunker is a great resource for playing with Angular with minimal effort, and I would encourage anyone to use it for exploring Angular further.

Share Button