Hands-On Data Structures and Algorithms with JavaScript

Laying out the UI

We will use angular-material once more as described in the preceding example. So, install and use the components as you see fit to style your application's UI:

npm install --save @angular/material @angular/animations @angular/cdk

We will use MatGridListModule to create our application's UI. After importing it in the main module, we can create the template as follows:

<mat-grid-list cols="2" rowHeight="2:1">    <mat-grid-tile>        <textarea (keyup)="codeChange()" [(ngModel)]="code"></textarea>    </mat-grid-tile>    <mat-grid-tile>        <div>            Result: {{result}}        </div>    </mat-grid-tile></mat-grid-list>

We are laying down two tiles; the first one contains the textarea to write the code and the second one displays the result generated.

We have ...