Contact


    Thank you

    We will be in contact shortly.

    Single-Page Applications and kdb+: Angular

    15 October 2020
    Share this:

    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 first in the series focussing on React is posted on this link. 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