Unidirectional Data Flow in Angular | Angular Development Company

The unidirectional data flow is an architectural pattern in Angular which improves the performance of Angular, in comparison with AngularJS. It is quite hard to find information on this pattern and it could be complicated to understand the available information. At Perfomatix, our dedicated and talented team of experts, with their comprehensive technical expertise and domain knowledge, continuously focuses on implementing the best choice of technology in our angular development services and delivers the best in class business solutions for our clients. A brief description can be found in the official documentation in the template statements and expression guidelines sections. This blog will provide detailed information on this architectural pattern. MVC architecture is used here to explain the unidirectional data flow in Angular.  Let’s start with MVC.

Model View Controller

When we develop an application, in general, we need some beneficial properties such that the application should be simple to reason about. That is, if we modify the model, the modification in the model should get reflected on the screen. But the view itself will not trigger any modifications in the model. In the Model View Controller architecture, we have a controller to interact with both the view and the model. But we have to ensure that this synchronization code in which the change in the model will get reflected on the view, does not trigger any further modifications on the model which will make the application very complex to reason about.

In any Angular 2 application there automatically generates a code that takes care of this synchronization between the model and the view. So in Angular 2 we do not have to write the code that synchronizes the model and view. This code is present in every Angular 2 application. If you take the console and type component.ngfactory you will find some code that is automatically generated for the synchronization.

The list of threads in this view will get synchronized by this code. In the thread-list component of the code, there will be multiple elements that have been created on the basis of the model of the thread-list component, which is DOM elements. Now based on the changes in the model, the view will also get changed and this feature where the updations in the model will get reflected on the view, without triggering any further changes on the model is called Unidirectional Data Flow. From the above picture, we’ll get that as the name indicates, here the data flows in only one direction

But in the case of Angular 1 or Angular JS, there arise multiple changes in the model in a single synchronization pass. This is because a cycle will get triggered as the watcher expressions get evaluated for the multiple times and this cycle will update the model for the multiple times until it gets stabilized and otherwise an error will be thrown.

The functioning of this property is ensured in Angular 2 through a special development mode. Angular will execute the synchronization code to generate a new view output based on a model when the application is running in this mode, so that code in the development mode is going to run twice. For the first time to generate a particular view and for the second time to make sure that we get the exact same view as previous. If any mismatches occur for the view, It means that some modifications have been made on the model by the synchronization code and at this point, the application will crash by throwing an error. This is how the Angular 2 applications ensure the proper working of Unidirectional Data Flow.

Two-way data-binding VS unidirectional data flow

Unidirectional data flow increases the performance of Angular than its predecessors. That is, the performance of Angular is greater than AngularJS. In both these frameworks components used to communicate using binding. Suppose there is a Parent Component P and a Child Component C. In AngularJS both these components communicate as follows.

Parent Component:

app.component('pComponent', {
 controller: class ParentComponent() {
   this.value = {label: 'testLabel'};
 },
 template: `
   <c-component obj="$ctrl.value"></c-component>
 `
});

Child Component:

app.component('cComponent', {
   bindings: {
       obj: '='
   },

Here the parent component P passes a value to child component C through the val input binding. In Angular, component communication is as follows.

Parent Component:

@Component({
   template: `
       <child-component [val]="value"></child-component>
   ...
export class ParentComponent {
   value = {label: 'testLabel'};
}

Child Component:

export class ChildComponent {
   @Input() val;

-------------------------
childComponentInstance = parentComponrntInstance.value

This process is called unidirectional data flow(one-way data binding). In both these cases when the framework runs, the change detection for the parent component will update the property which is bound through input binding in the child component. But AngularJS can also update the value in the parent component from the child component.

Parent Component:

app.component('parentComponent', {
 controller: function ParentComponent($timeout) {   
   $timeout(()=>{
     console.log(this.value); // logs {label: 'changed'}
   }, 4000)
 }
----------------

Child Component:

app.component('childComponent', {
   controller: function ChildComponent($timeout) {     
     $timeout(()=>{
       this.obj = { label: 'changed' };
     }, 3000)

Here we can see two timeout functions. Here suppose the function of the parent component comes first and hence understands that the function can be executed after 3 seconds and then the child component comes and understand that it can be executed after 2 seconds. But when it starts executing the functions, the child component will execute first, that is after 2 seconds and the parent component will execute 1 second later.

Here in this case, in AngularJS, when the function of the child component is executed and when the obj property gets updated, the change detection in Angular JS runs and detects a change and finally, it updates the value property in the parent component.

But this is not how Angular 2 renders this case. Here in this case, even though the obj property of the child component is updating, the parent component won’t get updated with this change. However, it is possible to update the value of the parent component through another mechanism. The mechanism through which the parent component value can be updated from the child component is known as Output Binding.

Based on the changes in the model, the change detection will also change the view of Angular 2 applications. However, changes can be implemented in Angular 2 by some other means. The parent component in the above case is updating by means of output binding. Output binding is not a part of change detection. Here, in this case, the parent component will get updated before the change detection starts. The mechanism of binding updates that are processed through change detection is known as Unidirectional Data Flow.

Conclusion

Above explained is only a brief about what Unidirectional Data Flow is. Lot more to explain about it. Here we explained unidirectional data flow using MVC and also briefly explained the differences between two-way binding and unidirectional data flow. Did you find this blog helpful?