Angular extended diagnostics

Automatically detect common non-obvious and error-prone patterns in Angular templates.

In the latest Angular release (v13.2.0) there's a great new feature added to the Angular compiler. It's called extended diagnostics. Let's have a closer look.

What are diagnostics?

Probably every programmer knows the frustration of spending hours and hours debugging to finally find out that a tiny little detail like for example a bracket was missing or misplaced.

Sometimes, typos are valid to the compiler, but of course, don't have the intended effect. Those kinds of bugs are annoying.

And that's where diagnostics come into play. Diagnostics help detect patterns that cause confusion or are known to be error-prone.

In v13.2.0, the Angular compiler has two checks that help us deal with such scenarios. Let's have a look at them.

Invalid banana in the box syntax [🍌]

"Banana in the box" is a fancy name for two-way data binding. In Angular, we use square brackets [] to bind properties as inputs and regular brackets () for event binding. We can combine property binding and event binding to achieve two-way data binding, [()] which looks like a…