A Better Way to Pass Data to Your Angular Components

Interactive examples of the component that powers our company’s web applications

I’m going to take you on a journey that my team and I at Nightlife Music took when building our new enterprise application in Angular.

We started out with the knowledge that we needed components to display and interact with data, and routes to navigate around our various pages. A pretty standard setup.

Note, if you’re all about the destination, skip to the bottom where you can see an interactive example of the declarative, higher-order component that incorporates Route and RxJS to drive our entire enterprise web application.

Component Attempt One: Requesting Data Inside Our Component

Our first components looked a little like this:

While this worked, we soon realized that it is the wrong way to go about things, for a couple reasons:

1. We were performing an HTTP request…