Single-Page Applications and kdb+: Angular

By Stephen Trainor

This blog post is the second of a series, which demonstrates how different front-end technologies can be used with kdb+.  The technology discussed in this post is called Angular (also known as Angular2+). Angular is a JavaScript (JS) framework maintained by Google, which offers a range of benefits, including built-in directives, two-way data-binding and pre-built components. Angular is a redesign of AngularJS (Angular 1), which will be covered in the next post. 

The SPA application discussed in this blog contains two tabs. The first is a calendar, which demonstrates cell editing and pagination. The second doesn’t contain any functionality and is just present to demonstrate URL routing for this technology.

Common SPA Features

Websockets and Promises are used throughout all of the technologies in this series, and are discussed in the first entry, which focuses on React and is posted on this link. It also provides a brief introduction to what a Single-Page Application is.

Angular has a feature called Observables, which are equivalent to Promises, but aren’t covered in this post.

TypeScript

TypesSript (TS) is a language created by Microsoft, which is a superset of JS – any JS code is also valid TS. It is the default Angular language, because it offers enhanced readability and debugging. For example, if newVar is expected to be an array of strings, it will throw a warning when compiling:

newVar: string[] = ["One",2];
ERROR in src/cal/cal.component.ts(20,29): error TS2322: Type 'number' is not assignable to type 'string'

Angular

Setting Up

1. Download source code from Github
2. Download npm
3. Run npm install in the terminal from the angular8Project directory, to install dependencies from package.json (bringing the project size to around 414 MB)
4. Run downloaded startA.bat and startQ.bat files – if you aren’t using C:\q\w64, startQ will require editing
5. View from a browser: http://localhost:4200/

Components

The philosophy of Angular is to have components, each consisting of a HTML file, a TS file and a scoped-css file. This neatly organises styling and dependencies and reduce class clashes.

This is the structure of the template project:

• index.html
  • app.module.ts
    • AppComponent
      • mdb-navbar
      • router-outlet
        • CalComponent
        • OtherTabComponent

app.module.ts contains module-importing and routing details, and bootstraps the AppComponent.

AppComponent contains the mdb-navbar to display the two tab buttons and router-outlet, which renders the selected tab.

Directives

Angular comes with many pre-defined directives, which allow the dynamic creation of HTML. Some directives used in this project are explained below:

1. ngModel: This creates a two-way data binding between a variable and a form. If the variable is updated by JS, the form should change accordingly, and vice-versa.
2. *ngFor: This duplicates a HTML element multiple times, with content and length related to the provided variable.
3. ngClass: This uses the provided expression to determine what class should be applied to an element.
4. *ngIf: This uses the provided expression to determine whether the element should be rendered or not

Material UI

mat-slide-toggle is just one of the pre-built components available in the Angular Material UI library, which provides a polished UI with reduced development time and complexity.

Sample Project

Angular SPA – Consists of a calendar with editable cells, and a separate tab to demonstrate routing

Rendering a table

Kdb+

In the calendar tab, a table with 8 rows is displayed on the front end, and refreshes as the user scrolls:

.cal.getCalendar:{[index]
  t:update hiddenIndex:i from cal;
  select ["j"$index,8] from t
};

Angular

cal.component.html returns:

<table
 <th *ngFor="let col of calendarKeys;" [ngClass]="headerWidth(col)" >{{this.formatHeader(col)}}</th>
  <tr *ngFor="let cal of calendar; let i=index;">
    <td *ngFor="let col of calendarKeys"
      [ngClass]="highlightDate(cal[col], col)"
      [attr.contenteditable]="isEditable(col)"
      (blur)="editRow(this.index+i, col, $event)"
    >{{this.formatCell(cal,col)}}
    </td>
  </tr>
</table>

[attr.] is the Angular syntax for editing HTML attributes
The outer brackets in {{this.formatCell(cal,col)}} instruct Angular to run the contained code in a HTML tag, rather than just displaying the text

Editing a Table

This contains three ngFors – one for the column names, one for the column rows, and one for the column cells.

kdb+

When the user edits a cell in the calendar tab, .cal.editRow is called. It formats the text provided by the user, and overwrites that table cell in memory using a functional select.

.cal.editRow:{[index; kolName; kolVal]
  index:"j"$index;
  kolName:`$kolName;
  t:`cal;
  kolType:type (value t)[kolName];
  //Only include numbers in number fields
  if[kolType in "h"$5+til 5; kolVal@:where kolVal in .Q.n,"-."];
  //Cast to the appropriate datatype
  kolVal:(neg kolType)$kolVal;
  if[kolType=0h; kolVal:(enlist; kolVal)];
  if[kolType=11h; kolVal:enlist kolVal];
  //update kolName:kolVal from cal where i=index
  ![t; enlist(=;`i;index); 0b; (enlist kolName)!enlist kolVal];
}

Angular

In the Angular code-snippet above, blur is used to trigger the below function when the cell gains or loses focus:

editRow = (i:number, kol:string, e:any) => {
  let text:string = e.target.textContent;
  return this.ws.qPromise(".cal.editRow",[i, kol, text]).then(this.postEditRow).catch(this.error)
};

Conclusion

Angular is a useful SPA framework which can provide a fast and responsive browsing experience. This blog discussed its benefits, such as built-in directives, two-way data-binding and standardised components, and should serve as a suitable introduction to getting started with Angular and coupling it with kdb+.

The front and back-end code outlined above are available in GitHub on this link