Communicate State Changes in Angular with an Event Bus

InstructorLukas Ruebbelke

Share this video with your friends

Send Tweet

In Angular 2, we use observables to push new data to our components. In Angular 1, we occasionally need to notify a component that a collection has changed so that we can perform an operation at the component level.

For example, when we are editing or creating a bookmark, and we navigate to a new category, we are left in this awkward state of an incomplete edit.

We need to be notified when a new category is selected at the bookmark level so that we can reset the current bookmark. Even though we do not have the convenience of an observable to emit state changes to us, we can still spin up an event bus to let us know when we need to hit reset.

Kate
~ 7 years ago

how would you implement the navigation like in the original bookmark app here with uiRouter?

Lukas Ruebbelkeinstructor
~ 7 years ago

Hey Kate,

This particular implementation of an event bus would not be necessary with eggly’s implementation of uiRouter.

As an example in the original app, if a user starts editing a bookmark and then selects a category, the controller/view pair associated with the current state is unloaded and whatever pair is associated with eggly.categories.bookmarks then gets loaded in, effectively clearing whatever edit (or create) is happening.

Kate
~ 7 years ago

Thx Lukas that makes sense but how would you go about and implement the navigation with uiRouter on this component structure ... I have tried different ways but I can't get it to work. Thx