Angular 2 Spreadsheet-Style Analytics


Most of my micro-application projects derive from a combination of ‘how to’ questions and personal experimentation.  This one is no different.  The issue of how to initialize a 2D tabular display in an Angular 2 template came up recently.  While there are some issues with accomplishing this task using *ngFor, that is due to the fact that *ngFor is a lot of sugar.  It’s actually straightforward to achieve upon examination of what Angular does under the hood.

Another item in the request department was a flyout panel.  Now, I don’t care for animation for the sake of animation, but I do concede that some (albeit limited) valid use cases exist for such a UI element.

Finally, I wanted to take the Angular2 CLI for one final ride before production release and the update to Angular 4 later this week.  So, it’s time for another example :)

Since the topic of the first request is a 2D table (which would be better implemented with a 3rd party datagrid in a larger application), I decided to do some spreadsheet-style analytics on a dataset that was made popular in the book ‘Machine Learning in R’ by Lantz.  This is accomplished with the Typescript Math Toolkit and the analytic results are displayed in a flyout panel.

I also wanted to add one more item to the ‘how to’ part of the application, namely custom attribute Directives.  This application illustrates the use of a ‘make clickable’ Directive.  This custom attribute Directive allows a simple attribute to be used to transform a DOM element such as a paragraph or H1 tag into a clickable element, i.e.

<h1 makeClickable (onClick)=”__onShowClicked()” [innerHTML]=”summaryString”></h1>

Now, this could be accomplished with an anchor or injecting custom script inside the Component’s code-behind.  The use of an attribute Directive allows existing markup and styling to remain largely unaltered and the intent is clearly displayed in a template as opposed to code (which takes time for another developer to deconstruct).  The Directive is also highly reusable.

The application reads data from a PHP file that is provided with the code distribution.  It is necessary to move this file to a server and alter one line of code in the model in order to build and run the application.  A CORS header is provided that allows the application to be served locally through the Angular 2 CLI.

The opening screen is rather basic:


Click on the “> Show Summary Statistics” text to display the flyout panel with summary statistics obtained from the Typescript Math Toolkit.  Ah, a nice mix of code and math.  Just what I like :)

Click on “> Hide Summary Statistics” to close the flyout panel and restore the original display.

Then, deconstruct the code and have fun.  On the subject of code, you probably want to know here to get it, so point your friendly neighborhood browser to this Github repo.


Comments are closed.