Understanding Unidirectional Data Flow

Unidirectional data flow is an essential feature for working with the web-based applications.

According to the official Angular docs:

The term Data Flow refers to how the data will be compiled, i.e., from top to bottom or bottom to top. This means that when any changes are detected in the data, it will be processed for data manipulation.

The reason data flows from top to bottom is that change detection strategies are also always performed from top to bottom for every single component, every single time, starting from the root component. This is awesome, as unidirectional data flow is more predictable than cycles. We always know where the data we use in our views comes from because it can only result from its component itself.

Change detection is one of the ways to perform an action using a specific event handler. The advantage of using this method is that we can modify the data of our app and make tons of changes with the whole tree of the current application.

The data that goes from the component classes into the output DOM—the data structures generated by the rendering process during the top-to-bottom rendering sweep of the component tree—is usually referred to as a unidirectional data flow.

Whenever the rendering process in Angular is started, the different expression which is template-specific will be evaluated along with the different lifecycle hooks of the Angular component. After evaluating each of those expressions, the data will be rendered into the DOM itself, but keep in mind that the process of rendering the view does not modify the data itself at all.

If the process is not followed correctly while rendering the data into the DOM, it leads to major issues like performance overhead and so on.

This is why we need a unidirectional data flow mechanism, which ensures that the data is moving from top to bottom and that changes are propagated through the system.

Previously, AngularJs supported two-way data binding, but Angular 2+ does not support it. This does not mean that we cannot use two-way data binding in Angular, but there are a several disadvantages:

Due to these issues, we should ignore using two-way binding; otherwise, it becomes too complex to manage large data into our Angular application.

Angular 2+ can support the two-way data binding approach using the combination of event binding and property binding.

In order to understand, let's look at some simple syntax.

Above is an example of a two-way binding mechanism that includes two different bindings:

By using these two binding mechanisms, we can flow the data from the element and trigger an action attached to the element at the same time whenever the user performs an action.

Below is the complete example to demonstrate two-way data binding.

Let’s break down the above example to better understand.

This is the kind of property for an element, which acts as a two-way data binding generator where the value of the text box will be updated whenever the user types anything into it.

Both the event and the property binding will be triggered at the same time, and the attached event handler will be activated.

This is our component variable, which stores any string as a value and passes to the ngModel in order to get the updated value whenever the user changes the original value.

This is the one-way binding of data which we have created into our component in the example.

So now we have demonstrated a simple example of two-way binding and learned how it works.

While working with an Angular app, the term “one-way” data binding leads us to the idea of unidirectional data flow.

Angular 2 does have a form of two-way data binding; it does not prescribe a data flow architecture. One of its selling features is being patterned agnostic so that it will work with an MVC or a Flux architecture. Therefore, it's up to us as developers to choose an appropriate pattern to work with.

In the unidirectional or one-way data binding approach, the component should never change data directly. Instead, it should alert the desired change to the calling context and leave it up to the calling context to decide whether or not the desired change should be applied to the view-model.

Basically, the one-way data binding mechanism flows the data from the component to view, and from the view, we can render the desired value.

In order to implement one-way data binding i Angular, we have plenty of options:

These are all the types of one-way data binding, and using such types, we can implement one-way data flow from our component to the view.

Let’s look at an example of each type of one-way binding.

This is the simplest way to bind the component properties or modal values to the view’s different HTML element.

Here in this type, the HTML element’s property will be used for the binding, and we can use brackets [ ] around the property, like this: [property].

Let’s understand property binding with an example.

Here in this example, we have used label element, and along with the element we have used a property called innerHtml.Notice that we have used [] along with the property name, which defines that we have used property binding that accepts the modal or component value from the component and renders it.

This is how we can use property binding in order to use component value into the view.

Class binding is used to add or remove different class names from an HTML element based on the value coming from the component's modal or property.

In order to apply class binding, there is one prefix called class. For example, if we want to apply the class name mytext, then we can apply class binding, as explained below.

Let’s look at a simple example using the class binding mechanism.

And the stylesheet can be defined in the different file, like this:

In the above code, the snippet is just a simple CSS stylesheet which contains a single class, myLabel, that we have used to bind the class.

This is how to use class binding, and using such an approach we can add or remove different classes conditionally.

We have already seen how to apply class binding. Sometimes we may need to bind the styles to be inline directly to the HTML element.

In order to apply inline styles using style binding, we should use the prefix style followed by the (.) dot operator and the name of the style.

Let’s move to the simple example which demonstrates the usage of style binding.

Here in the above code snippet, we have an element called h3, and along with the element, we need to apply a font-size property. Then we can make use of style binding.

In the example, we have used [style.font-size] along with the specific value, so that the styling will be applied to that element and it will be rendered into the DOM.

Attribute binding is used to bind the different attribute properties to the view’s element. It is used to bind the different attributes conditionally when we have component/modal properties based on the business requirement from the component to the view.

To apply attribute binding, we need to use the prefix attr followed by the (.) dot operator and the attribute name.

Now let’s jump to the example in order to understand how attribute binding works.

As you can see in the example, we have element <h3>. If we want to apply attribute align, then we can surround it with the binding like [attr.align] followed by the appropriate value.

This is how we can apply various supported attributes to the element using the attribute binding mechanism.

Interpolation is a commonly used binding mechanism which is also called as one-way data binding.

Generally, interpolation is used to bind the one-way component property to the view and not vice-versa.

In order to use interpolation, we need to enclose our component’s property with curly braces {{ }}, and the value will be rendered into the DOM.

Let’s jump into the example and see how interpolation works.

Here in this example, we have one component property called propValue, and into the view, we have span element and used {{ }} brackets in order to render the value within the span.

Interpolation will always be a way of one-way data binding to bind the value from component properties to the view.

In this guide, we have learned about unidirectional data bindings, including what a unidirectional data flow is, as well as one-way and two-way data binding approaches and a detailed list of one-way binding types and how to use them.

That’s a wrap for now. Stay tuned for more interesting and detailed articles.