Push and Pull internal data via Observables in Angular 10

So while working on the ngWiki code (a soon to come open source project from ZimBaroo's Geeks) I thought I would clean it up and simplify it prior to putting it in open source.

The original structure looked something like this:


During the initial code review with the Geek team from ZimBaroo’s the code structure caused a bit of confusion.  So, I figured if I restructured the source code, I could simplify it and cause less confusion.  However, it was not as simple as I thought.  I wanted to arrive at the structure:


This way each component would have only one function and routing would become just two wildcard routes to two component, like this:

const routes: Routes = [ { path: 'edit', children: [{ path: "**", component: PageEditComponent }]},                           {path: '', children: [{ path: '**', component: PageComponent }]}];


This I thought would really clarify the code, when in view mode the code is in PageComponent, when in edit mode the code is in PageEditComponent.

This change however would require the removal of the MarkDownViewer component from the MarkDownEditor component.  Originally the reason it was included there was as you type in the editor it is quite simple to refresh the viewer.  Now I would have to figure out how to share the data via an observable.   I thought this would be a simple problem as I have used Observals a lot with API data retrieval.

Turns out while it was in the end quite simple, there was little to find on the web about how get input from one component and push it to another component.  Every Observal tutorial I found was on getting data via an API (most of those all used the same code found in the Angular help pages). So I wrote this little hack program to figure it out and filter the code to just the parts that do the work.   The source code is here GitHub ObserverableDataShare and it kind of works like this:

'original 'original

The home.component is embedded in app.component.html;  Home has myData.service defined in the constructor.  Input.component and output.component are embedded in home.component.html and have myData.service defined in the constructor.

Data flows from input.component to output.component continuously as can be seen from typing in the input box and seeing it display on the output box.  You can also see it in the console.log, every time input updates shareData.model, output receives the update.


The keys to the code are:

  • Add myData.service to the providers in app.module.ts
  • Add myData.service to the constructor in home.component.ts, input.component.ts and output.component.ts
  • Subscribe to the myData.service in ngInit of output.component.ts; use this to set the local view of shareData.
  • Create private shareData in myData.service.ts that is type BehaviorSubject<ShareData>
  • Set the data via observable.next in myData.service.ts (see setData method)
  • Get the data via observable.asObservable in myData.service.ts (see getData method)

Hope this helps, the code base is amazingly simple so just pull it from GitHub

Special thanks goes out to Agash Thamo for his Stack Overflow answer that led me down the right path.

Add comment