Angular Observable Subject Example Sharing Data Between Components

In this tutorial, we will show you how to use Subjects in Angular with examples. We learned What is Subjects in Angular and different types of subjects like ReplaySubject, BehaviorSubject & AsyncSubject in Angular

Angular Subject Example

We will build a todo app. Our app has two components.

One is the Todo list component, which displays the list of todos. It also has the option to delete a todo

Another one is Todo add a component, which allows us to add a Todo item.

Both will communicate with each other via Service. Whenever a new todo is added, the service will notify the Todo list component to update the lists using a observable

Code is available at StackBlitz

Todo Service Using BehaviorSubject

Create the todo.service.ts in the src\app folder.

todo.service.ts

Here, we create BehaviorSubject of type Todo[]. Behavior expects us to provide an initial value. We assign an empty array. The BehaviorSubject will always emit the latest list of Todo items as an array. We can also use Subject here. But the advantage of BehaviorSubject is that the late subscribers will always receive the latest list of Todo items immediately on the subscription. We do not have to call the next method.

Also, it is advisable not to expose the BehaviorSubject outside the service. Hence we convert it to normal Observable and return it. This is because the methods like next, complete or error do not exist on normal observable. It will ensure that the end-user will not accidentally call them and mess up with it

The todos will store the todo items in memory. We use the nextId to create the id of the Todo item.

Create pushes the new item to the todos list. Here we use the next method to push the todos list to all the subscribers. Note that we use the Object.assign to create a new copy of the todos and push it to the subscribers. This will protect our original copy of the todos list from accidental modification by the user.

Remove method removes the Todo item based on id and pushes the new list to subscribers.

TodoList Component

TodoListComponent displays the list of Todo items.

todo-list.component.ts

We inject todoService

And get hold of a reference to the todo$ observable.

We use the async pipes to subscribe to the todos$ observable. No need to worry about unsubscribing the observable as angular handles it when using async pipes

deleteTodo deletes the Todo item by calling the remove method of the todoService

TodoAdd Component

We use TodoAddComponent to add a new Todo item

todo-add.component.ts

First inject todoService

We get hold of the todos$ observable. We are not doing anything with it But you can subscribe to it to get the latest list of Todo items.

onSubmit method creates a new Todo item by calling the create method of the todoService.

app.component.html

References

  1. https://stackblitz.com/edit/angular-fh1kyp
  2. Angular Observable Data Services

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top