Search auto complete with Angular

I recently solved, or I should say, rewrote, an auto complete functionality in one of my angular apps. I had it functioning but it was ugly and half-backed under the hood. Now that I have something that I like, I want to share it so that I can go back to the solution myself in the future, or perhaps someone else needs this functionality and they can refer to it.

What’s interesting is that this problem has been solved millions of times before, and even angular official docs had an example, but following their example the solution still seemed convoluted and less than ideal from functionality and UI perspective. I don’t know, maybe my google/stackoverflow skills failed me and I didn’t find an existing solution that I liked. Either way, let’s dig in.

Demo of what we are after

Stripped down to its core, here is the UI I am looking for:

Simple app that has an input box asking to enter a stock ticker or name

A page with a search input box where a user can enter a stock symbol and the app will show matching tickers that user can select and navigate to that stock symbol for instance to get more information.

How do we get this working on Angular?

Implementation breakdown

Conceptually, on the user interface side I went with two separate areas: 1) user input, and 2) rendering of the…