A Stock Portfolio using Angular 6 : Finding a Financial Web Service


I want live data form my stock portfolio application. Alpha Vantage provides a “free” REST service that supports a plethora of calls for retreiving stock information. If you go here you can make calls against their services. To make calls from your own application however you are going to need to generate your own unique API Key.


The cool thing about Alpha Advantage is that their REST services are CORS-enabled. CORS-enabled services can be called directly from a web browser without being blocked by cross-domain policies. Typically, a web browser will not allow you to GET data from a domain other then the one your application is running on. So, http://www.mysite.com/myapp can not make calls to http://www.yoursite/yourservice. CORS includes a special headers in the REST HTTP Request, “Access-Control-Allow-Origin” that circumvents this restriction. Prior to CORS and it’s predecessor ( JSONP) I would of had to expose a proxy service on the web application running the stock portfolio application. The proxy service wouldn’t be restricted by cross-domain policies as it would be running on the server. The web-browser would call the proxy service which would in turn call the service residing on another domain.

To get a quote for a stock we’re going to make this REST call against Alpha Vantage. This is what the result looks like :

   "Global Quote": {
      "01. symbol": "MSFT",
      "02. open": "99.3000",
      "03. high": "99.7500",
      "04. low": "96.4000",
      "05. price": "99.2400",
      "06. volume": "33233175",
      "07. latest trading day": "2018-12-27",
      "08. previous close": "100.5600",
      "09. change": "-1.3200",
     "10. change percent": "-1.3126%"

A Strongly-Typed Quote Model

Although we could store the quote as-is it would be a better idea to create a Strongly-Typed Model for it using Typescript. By using a Strongly-Typed Model :

  • The signature of the result will be known to downstream consumers – eliminating guesswork and confusion.
  • Typescript provides validation support. The compiler will notify you if you’re trying to access field on the Model that does not exist.

This is what my Quote Model looks like :

export class Quote {

   constructor ( symbol: string, open: number, high: number, low: number, price: number, volume: number, latestTradingDay: string, previousClose: number, change: number, changePercent: number ) {
      this.symbol = symbol;
      this.open = open;
      this.high = high;
      this.low = low;
      this.price = price;
      this.volume = volume;
      this.latestTradingDay = latestTradingDay;
      this.previousClose = previousClose;
      this.change = change;
      this.changePercent = changePercent;

   symbol: string; 
   open: number;
   high: number;
   low: number;
   price: number;
   volume: number;
   latestTradingDay: string;
   previousClose: number;
   change: number;
   changePercent: number;

An Angular Service

I created a Ticker Service to fetch the quote from Alpha Vantage’s REST service, wrap it up as a Quote object, and then return it. As REST service calls are asynchoronous the Quote is returned as an Observable. The Ticker Service returns the Observable immediately – even if the REST call hasn’t completed :

export class TickerService {


getQuote(ticker: string) : Observable {

   let url = ...

   return this.http.get(url).pipe(map( res => new Quote(
      res["Global Quote"]["01. symbol"],
      res["Global Quote"]["02. open"],
      res["Global Quote"]["03. high"],
      res["Global Quote"]["04. low"],
      res["Global Quote"]["05. price"],
      res["Global Quote"]["06. volume"],
      res["Global Quote"]["07. latest trading day"],
      res["Global Quote"]["08. previous close"],
      res["Global Quote"]["09. change"],
      res["Global Quote"]["08. change percent"]


The consumer/client subscribes to the Observable – and waits. When the REST service data is finally fetched, “subscribe” is invoked along with a “data” object (the desired Quote). This code snippet is from the Ticker Service’s Unit Test

describe('TickerserviceService', () => {

   it('should return a quote (MSFT)', () => {
      const service: TickerService = TestBed.get(TickerService);
      service.getQuote("MSFT").subscribe( data => {
         expect(data.symbol == "MSFT");

In a hurry?

The finished source code is available on my GitHub repository.

The finished application is up-and-running on Heroku here. Be aware that it is running on a “free” development server so give it a minute or so to spool up.

Till next time!


Next : Routing

Previous : Requirements, Components, and Mock-ups

#Angular6 #Angular #CodingChallenge #CORS #FrontEnd #Heroku #Bootstrap #AngularMaterial#Programming #SoftwareDevelopment #SoftwareEngineer #DrawnAndCoded

A Stock Portfolio using Angular 6 : Requirements, Components, and Mock-ups


The requirements presented to me for the coding challenge were pretty sparse :

  1. Create an application for managing “news” articles for a user’s stock portfolio.
  2. It needs to be responsive so it displays nicely on a variety of devices.

Naturally, I had to add my own requirements :

  1. The users’ stock portfolio and news needs to be persistent; a user should not have to re-create their portfolio every time they use the application.
  2. Stock data for the users’ portfolio needs to be refreshed in real-time.
  3. The user should be able to view historical data for a stock in a chart.

Why Components are Awesome

The cool thing about modern web frameworks is that they force you to compartmentalize your stuff into reusable widgets. So, instead of a huge monolithic Javascript file you have a bunch of self-enclosed “widgets”. Each “widget” performs a specific task and has it’s own javascript, html, css, and tests. A “widget” can be used for fetching data or displaying a particular section of markup. This a huge boon when working on large projects on a large team as it allows you to break up the work more easily.

Stock Portfolio Components

I broke up the application into 8 Components: The NavigationComponent will always be displayed in the header. Clicking on “Add Symbols” will bring up the TickerAddComponent which will allow the user to add stock symbols. Clicking on “Add News” will bring up the TickerNewsAddComponent which will allow the user to add news for a stock symbol. The TickerComponent will be displayed on the “home” page. Clicking on a stock symbol will bring up the TickerContainerComponent which hosts the TickerChartComponent, TickerDetailsComponent, and TickerNewsComponent.


This is a mock-up of what the Components looks like as well as their interaction.

In a hurry?

The finished source code is available on my GitHub repository.

The finished application is up-and-running on Heroku here. Be aware that it is running on a “free” development server so give it a minute or so to spool up.

Till next time!


Next : Finding a financial web service

Previous : Challenge Accepted

#Angular6 #Angular #CodingChallenge #FrontEnd #Heroku #Bootstrap #AngularMaterial#Programming #SoftwareDevelopment #SoftwareEngineer #DrawnAndCoded

A Stock Portfolio using Angular 6 : Challenge Accepted


The Interview Coding Challenge

I’m interviewing right now. One thing that has changed dramatically since I last interviewed is …. the dreaded “Coding Challenge”. What used to consist of a quick whiteboarding excercise has now progressed into the design and development of an entire application. The good news is that employers typically allow you to do it from the comfort of your own home and at your own pace. The bad news is that the challenges can be quite elaborate.

A Stock Portfolio using Angular 6

One of the coding challenges that I was presented with by an employer was to develop a “stock portfolio” application that would allow you to enter stock tickers and news articles. The rules were vague: I just needed to use a newer Javascript Framework ( React, Angular, Vue, etc … ) as well as a Presentation Framework ( Angular Material, Bootstrap, etc… ).

I accepted the challenge, started working on it, and then quickly realized how much cooler the stock portfolio application could be with some additional features. I coul pull in Local Storage, a Live Stock Feed, Charting! Professionally this would be taboo – a bad case of what is know as scope creep. However, being unemployed with some extra time on my hands I felt it was an opportunity to showcase something pretty cool.

In a hurry?

The finished source code is available on my GitHub repository.

The finished application is up-and-running on Heroku here. Be aware that it is running on a “free” development server so give it a minute or so to spool up.

Till next time!


Next : Requirements, Components, and Mock-ups.

#Angular6 #Angular #CodingChallenge #FrontEnd #Heroku #Bootstrap #AngularMaterial#Programming #SoftwareDevelopment #SoftwareEngineer #DrawnAndCoded

Christmas Tree Shopping

Christmas Tree Shopping Perfect Band Aids Artificial Tree XMAS Comic
When I was little my dad took us out a couple of times to cut down a tree at a “farm”. He’d grab his saw. My mom would grab a box of band-aids. And after a few hours my brother and I would come back home to decorate a freshly cut tree … and a whole new vocabulary of swear words to try out. These days my trees come in a box, it unfolds like an umbrella, and it comes pre-hung with 5000 twinkly LED lights. Merry Christmas!

#Christmas #ChristmasTreeShopping #PerfectChristmasTree #BandAids #ArtificialTree #XMAS #DrawnAndCoded #Comic