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.
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.
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
This component can now be used like this.
Okay, we use the banana in the box syntax to two-way bind that
counter property. So let's go ahead and run this.