Angular extended diagnostics

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

Kevin Kreuzer

--

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 banana in the box.

Okay, let's create a small practical example where we increment a counter using the banana in the box syntax. Let’s first start with a child component.

increment-counter component that displays accepts a counter and emits a counterChange event on button click

This component accepts a counter and uses the button to call an increment function, which then increments the Counter and emits it as a new counterChange event.

This component can now be used like this.

Use the banana in the box syntax for two way data binding on an increment-counter component

Okay, we use the banana in the box syntax to two-way bind that counter property. So let's go ahead and run this.

--

--

Kevin Kreuzer

Passionate freelance frontend engineer. ❤️ Always eager to learn, share and expand knowledge.