Replacing event listeners on document with custom event streams in Angular & RxJS for greater control

Beer bubbles bubbling up
Beer bubbles bubbling up
Photo by faferek on shutterstock

The Initial, Happy Scenario

An interesting scenario I recently encountered was a list of items, each of which contained a dropdown, like so:


Documenting my two-week struggle to get over far more hurdles than I ever expected

Hurdles lined up on a running track
Hurdles lined up on a running track
Image by Alohaflaminggo on shutterstock

I’m writing this story partly for my future self — so I’ll have this recipe at my fingertips if I ever need to do it again — and partly for others, to hopefully spare some poor souls some of the pain that I just went through.

Prologue

I inherited a task to implement a file upload feature in our Angular 8 app.

What made this task a bit different than a typical file upload was that we weren’t uploading directly to the file storage server, we were uploading to our intermediate Node server (owned by the Frontend team, my team) which…


Using Directives and Dependency Injection to avoid unnecessary Component Inputs

Golden Retriever looking down hole
Golden Retriever looking down hole
Photo by Annette Shaff on shutterstock

I recently had a requirement to make sure a PrimeNG Dropdown panel inside a modal with scrolling content was not constrained within the modal, but rather could be seen and interacted with without having to scroll.

Here’s what I’m talking about…

The Scenario

This is the default, and what we don’t want (or, rather, what we shall not deliver):


A simple testing pattern for a scenario that can be a little tricky

Man looking at computer frustrated or confused
Man looking at computer frustrated or confused
Image by Oladimeji Ajegbile on Pexels

Writing unit tests can be fun but also tricky, especially if you’re testing code that may not have been written with unit testing in mind.

One scenario that I keep encountering in various ways — my own unit testing tasks, teammates at work asking “How do I test this?”, this StackOverflow question — is how to unit test a module or function that has business logic contained within a callback function being invoked by a nested entity that needs to be mocked for the test.

The Scenario

Here’s an example of app code I’m talking about (Node app code, in this case)…

Michael Jacobson

Frontend Developer working with Angular since v0.3. I love solving problems and building cool stuff. I sweat the details because…I love the details.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store