Number formatting in Angular 6 (multirow form)

Working as a contractor made me build an application that I use to generate my invoices and track my activity. But why build an application where there are other commercial solutions, you ask? Well, I needed a way to track my activity other then Excel like tools (which most of my colleagues use), I did not want to purchase other tools that may be available as they did not have format and reports that I needed (although some of them are really good), and most importantly, it is fun to build stuff. As developer, I created my own solution that you can get from my GitHub. Part of the solution is in the BitBucket as I needed to develop Angular based solution on a private repo. This is because I purchased an excellent Angular starter template called Egret that has some license limitations regarding sharing. It offered me a framework to work with with features such as sample forms, basic security, routing, animations and etc. I modified all of these to suit my needs.

One of the issues I had is that I needed to format numbers in multi column/row for all edit boxes for timesheet entry. I had to spend a bit of time to research how this is best accomplished but landed on a specific solution with a few modifications of my own.
I needed to:

• Format on blur and focus events
• Format on form init without blur and focus events
• Format and calculate fields like totals on every field update with these fields being read only

Here is the number-format.directive.ts that will take care of the bluer and focus events:

The second part is that will take care of the form init and totals:

Here is the final look and feel:

A minor item to add to this would be to only allow increments of 0.25, or to round up number to quarters.