Although we have generated the tree and the expected/actual results of the input dataset based on training set, it's really difficult to visualize this data right now. So, to do that, let's create a small component that accepts the tree and renders the nested format of the tree on the UI. This is pretty minimal and is only for the purpose of understanding our data in the form of the decision tree.

Under the utils folder, let's first create the folder called treeview to contain our component. Let's call it treeview, as we create the component and inject it into the main module.

For the treeview, let's first create the treeview.ts file:

import {Component, Input} from '@angular/core';

@Component ({
    selector: 'tree-view',
    templateUrl:'./treeview.html',
    styleUrls: ['./treeview.scss']
})
export class TreeView {
    @Input() data;
}

Then, we will create the template that goes with the component and add it as treeview.html:

<ul *ngFor="let node of data">
    <li *ngIf="node.name">
        
        <!-- show name when available -->
        <span class="name">{{node.name}}</span>
    </li>

    <!-- is not root node, render branches recursively -->
    <tree-view *ngIf="!node.leaf" [data]="node.branches"></tree-view>
    
    <!-- if leaf node render node value -->
    <li *ngIf="node.leaf">
        <span class="leaf {{node.value}}">{{node.value}}</span>
    </li>
</ul>

Let's style the treeview to make it more legible, treeview.scss:

ul {
  list-style: none;
  line-height: 40px;
  position: relative;

  &::before{
    content: "";
    height: calc(100% - 60px);
    display: block;
    top: 40px;
    left: 60px;
    border-left: 1px solid #333;
    position: absolute;
  }
}

li {
  position: relative;

  &::before{
    content: "";
    width: 20px;
    display: block;
    top: 50%;
    left: -20px;
    border-bottom: 1px solid #333;
    position: absolute;
    transform: translateY(-50%);
  }
}

.name {
  padding: 10px;
  background: #e1f4ff;
}

.leaf {
  padding: 10px;
  position: relative;

  &.Yes {
    background: #bcf9bc;
  }

  &.No {
    background: #ffa2a7;
  }
}

Now, to consume the treeview component, let's add it to the declarations in app.module.ts:

...
import {TreeView} from "../utils/treeview/treeview";

@NgModule({
    declarations: [
        ...
        TreeView
    ],
   ...
})
export class AppModule { }

To use this, we just have to bind the tree that we generated in our app.component to the tree-view component:

With the treeview added, app.component.html gets updated as follows:

<div *ngIf="tree">
    <tree-view [data]="[tree]"></tree-view>
</div>

This renders the tree on the UI as expected:

However, this is only a part of the big tree that is generated, which is tough to read and visualize. Let's try the same with the Soccer example by switching the training and testing data with Soccer data instead, which we saw in the previous sections:

Let's render the input data that we passed in for testing our decision tree. For that, we can modify our app.component.html to show the table and visualization simultaneously:

<div class="split">
    <div *ngIf="tree">
        <tree-view [data]="[tree]"></tree-view>
    </div>
</div>
<div class="split">
    <h3>Overall accuracy {{accuracyPct | number}}%</h3>

    <table>
        <thead>
            <th>Credit Score</th>
            <th>Credit Age</th>
            <th>Remarks</th>
            <th>Utilization</th>
            <th>Hard Inquiries</th>
            <th>Expected</th>
            <th>Actual</th>
            <th>Accurate</th>
        </thead>
        <tbody>
            <tr *ngFor="let test of tests">
                <td>{{test.creditScore}}</td>
                <td>{{test.creditAge}}</td>
                <td>{{test.remarks}}</td>
                <td>{{test.utilization}}</td>
                <td>{{test.hardInquiries}}</td>
                <td>{{test.expected}}</td>
                <td>{{test.actual}}</td>
                <td [class]="test.accurate">{{test.accurate}}</td>
            </tr>
        </tbody>
    </table>
</div>

To style the table, we can add the following to our app.component.scss file:

.split {
    width: 50%;
    float: left
}

table, td, th {
  text-align: center;
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  height: 50px;
}


.true {
  background: #bcf9bc;
}

.false {
  background: #ffa2a7;
}

The expected output is as follows:

For the Soccer example: