Angular Inputs and Single Source of Truth
The main way for Angular components to receive external data is through “inputs.” In this article, I’ll explain why the Single Source of Truth principle should be applied to inputs.
Wikipedia provides a scientific description of the Single Source of Truth, but if we apply it to Angular components and their inputs, it will sound like this:
In this small demo (source code), you can add items to your shopping cart, but after 10 seconds, the list will be replaced with some items you didn’t pick.
This demo emulates a situation where the shopping cart data is loaded from the server, but while the request was loading, the user was able to add some items to the cart. Maybe it’s not the best demo, but I hope it illustrates the idea. Creating code with bugs intentionally is not as easy as it happens unintentionally 😉
Generally speaking, the state of our component is globally mutable. We should avoid it everywhere, not only in components. But let’s see how we can avoid it in components.
