kdb Products
Overview
KDB.AI
kdb+
kdb Insights
kdb Insights Enterprise
Capabilities
The Data Timehouse
Vector Database Explained
kdb+ Time Series Database
PyKX Python Interoperability
Services & Support
Financial Services
Quant Research
Trading Analytics
Industry & IoT
Automotive
Energy & Utilities
Healthcare & Life Sciences
Manufacturing
Telco
Learn
Overview
Featured Courses
KX Academy
KX University Partnerships
Connect
KX Community
Community Events
Developer Blog
Build
Download
Documentation
Support
About Us
Partner with Us
Become a Partner
Find a Partner
Partner Signup
Join Us
Connect with Us
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.
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.
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'
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:
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.
Angular comes with many pre-defined directives, which allow the dynamic creation of HTML. Some directives used in this project are explained below:
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.
Angular SPA – Consists of a calendar with editable cells, and a separate tab to demonstrate routing
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
};
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
This contains three ngFors – one for the column names, one for the column rows, and one for the column cells.
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];
}
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)
};
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