Angular @Input @Output and Services for state management

State management in Angular

State is the information that is retained by your app at a given moment in time.

State includes both the state of UI and the state of variables in your app.

Whenever the state of your app is changed due to user interaction or some other events, Your app should make sure, the UI always displays the current state, this is called state management.

How state can be managed in Angular

In an Angular app, Components are the most basic UI building block. The UI that is displayed by your app would have multiple components in it.

Each component will have its own state and maintains it, but it has no idea about the state of other components.

To know about the state of other components, state should be shared between the components. The most common ways are mentioned below,

• Using @Input and @Output.
• Using Services and observable.
• Using Ngrx store (@ngrx/store).

State management using @Input and @Output

Using @Input component a parent component can share data to child component and using @Output a child component can emit a value to parent component.This way of sharing state of a variable between components are suitable, if the component are in a parent child relationship.

You can refer the angular app example, to see @Input, @Output in action. In this app,

• GetInputComponent will share the state of the variable ‘listItem’ to DisplayListComponent.
• DisplayListComponent will share its state to GetInputComponent by an output event ‘itemStatus’ .

If two components are nested deeply and are far apart from each other as in below example, To share data from component 2 to component 6 using @Input and @Output below steps should be done,

1. component 2 has to emit data to component 1
2. component 1 has to emit data to app component
3. app component has to input data to component 4
4. finally component 4 has to input data to component 6.

In such cases, sharing data using @Input/@Output is very hard. To overcome this problem, we can use services and observable to share the state between components.

State management using Services and observable.

The methods and variables in a service can be accessed by all components in an app. If we want to share a data/state between two or multiple components, instead of maintaining the variable inside a component and sharing it with other components using a series of input and output, we can move the variable/state, to a variable in a service, so that all components can access it and do changes to it as required.

Okay, you should be thinking what is the use of Observable here?

When component 2 assigns/modifies value to the ‘myData’ variable in our MyService, other components are not aware that ‘myData’ variable has been modified. To overcome this, let us set an observable property in MyService say ‘$myDataChanged’ and whenever we assign/modify the ‘myData’ variable, let us emit the updated value or a boolean from ‘$myDataChanged’ observable.

Now we have setup our service in a such a way, that whenever myData variable has been changed, the observable $myDataChanged will emit a value.Other components that wish to use the myData variable, should subscribe the $myDataChanged observable, and can access the myData variable inside the subscription, to get the updated value from the service.

You can refer the angular app example, to see service and observables in action. In this app,

1. GetInputComponent will assign the value to ‘listItems’ variable present in MyListService.

2. MyListService update the listItems and emit an observable ‘$listItemChanged’.

3. DisplayListComponent subscribe to the observable $listItemChanged and access the updated listitems variable inside the subscription.

Mentioned below the comparison of steps that we need to do to share the state in myData variable from component 2 to component 6

Using Input Output

1. component 2 has to emit myData to component 1
2. component 1 has to emit myData to app component
3. app component has to input myData to component 4
4. component 4 has to input myData to component 6.
5. component 6 will receive myData.

Using Service & Observable

1. component 1 assigns value to myData in MyService
2. MyService emits an Observable $myDataChanged
3. component 6 will subscribe to $myDataChanged, will access the updated myData value, inside subscription.

Check out this article to get started on @ngrx/store key concepts, how to implement it in an angular app and why it can be used over services.