Angular Templating Basics: Interpolation, Data Binding, Structural Directives, and Pipes Talk

Intro

I've grown to really enjoy writing client side applications with Angular. Though of the big three front-end JS frameworks (React, Vue, & Angular), it has the steepest learning curve for beginners. Some of the earliest basics that newcomers to Angular need to learn is how Angular templates work and how to get them to do what you need. My talk on Angular Templating Basics covered four different utilities that Angular provides for templating: Interpolation, Data Binding, Structural Directives, and Pipes.

Talk Overview

In the presentation, I covered four of the basic tools that Angular devs would use to write interactive user interfaces. After a short definition of terms on the unfortunate naming of the framework itself (AngularJS vs Angular), we jumped right into String Interpolation. We discussed how it works similarly to ES6 string interpolation, but uses its own syntax of double curly braces: {{ example }}. One cool thing about Angular's string interpolation is its ability to evaluate expressions inside of the curly braces, like this: {{ 1 + 1 }} or {{ exampleMethod(param) }}.

The second tool we covered was data binding. Angular provides several different types of data binding, but the most common ones that new Angular devs will encounter first are event binding, property/attribute/class/style binding, and two-way binding. We discussed each of these in turn pointing out the template syntax for each kind of binding: [property], (event), and [(twoWay)] and how each could be used to perform a common template change.

We moved on to Angular/s structural directives: *ngIf, *ngFor, and *ngSwitch. I explained the template syntax and how each might typically be used for displaying variable content in a template.

Finally, we covered some of Angular's built in Pipes and how they can be used to filter values into specific formats. I pointed out the Pipes operator, | and we took a look at the currency, date/time, uppercase, lowercase, and titlecase pipes. I particularly like that pipes can be strung together to perform multiple manipulations on the same string and that devs can write their own pipes as needed.

Overall, I think the presentation was a good introduction to Angular templating. I know when I first started learning Angular it was hard for me to get over how 'noisy' Angular templates looked, but once I started to become more comfortable with the different template syntaxes it was much easier to quick parse and read Angular templates. Perhaps this presentation was a gentle enough of an introduction to help others get past the 'noise'.

Talk Download

Unfortunately, I forgot to record the presentation, but if you want to take a look at the slides, you can download them here.