One of my colleagues was assuring me we couldn’t create an Observable that was emitting its current value when you subscribe to it. Intrigued, I stopped what I was doing and started investigating. After multiple unsuccessful Google searches, I went straight to the RxJS documentation and found out it was possible after all :D. I’d like to share it with you in detail but I figured it would be nicer to first illustrate the core mechanisms on a basic example. Let’s create an accordion!

The behavior of the accordion is simple. You have a list of items, for example a title and a description. Only the titles are visible. When you click on a title, the corresponding description shows up. When you click on another title, any other visible description collapses and the one related to the new title is revealed (see the above video).

To do so, we can use a service that emits which title was clicked, so each item can “decide” whether to make its description visible or not. One way is to create an Observable. So first, let’s say a few words about this feature.

The Observable

As you may know, Observable comes from RxJS, aka ReactiveX library for JavaScript. Observables are really useful to handle events and more particularly to subscribe to them. It can be defined as:

“A representation of any set of values over any amount of time. This the most basic building block of RxJS.” RxJS API Document

Angular uses Observable in its core functionality. For example, Angular’s Router has a method events that creates an Observable of the current url. Each time the url changes this Observable emits the new url (this is a simplified example, the emitted message is actually more complex).

This is great, but how do we create our own Observable? First, we need a Subject.

The Subject

A Subject is a sort of bridge or proxy […] that acts both as an observer and as an Observable. Because it is an observer, it can subscribe to one or more Observables, and because it is an Observable, it can pass through the items it observes by reemitting them, and it can also emit new items. RxJS API Document

Back to our accordion example. The Subject will observe the event “click on any item” and will emit the item that was actually clicked. So, any of the items in the list may show its description.

Let’s dive into the code.

Finally, the example

We need:

1 parent component: ListComponent, to handle the list of items.

1 child component: ItemComponent, to display a particular item.

1 service: ItemService, which owns the common Observable that will be used by all the ItemComponents.

The ItemService creates an Observable using Subject<Item> (this means the Observable will emit objects of type Item).

Observables are usually prefixed with a $ as a convention.

The ListComponent inits the list of items and creates a loop of ItemComponent.

The ItemComponent displays the item’s data (title and description). The description is displayed (or not) according to the field isVisible. The trick is:

to subscribe to $visible of ItemService and update this.item.isVisible to true if this.item.title is the same as the emitted one;

on item.title click, to have $visible emit this.item, so that each ItemComponent can know which item.title was clicked.

It is good practice for performance issues to create a Subscription when you subscribe to the Observable (in the ngOnInit), so that we can unsubscribe the component (in the ngOnDestroy). Therefore, we use component lifecycle hooks (OnInit and OnDestroy) to make sure we do not create memory leaks.

[Subscription] represents a disposable resource, such as the execution of an Observable. A Subscription has one important method, unsubscribe , that takes no argument and just disposes the resource held by the subscription. RxJS API Document

Thanks for reading my article ;). You can find the full example here:

Stay tuned for my next article on Observable emitting its current value when it is subscribed to.