Angular 5 + Form.io Custom Component

app.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { FormioAuthService } from 'angular-formio/auth';
import { AppConfig } from '../config';
import { FormioForm } from 'formiojs/full';
import { CheckMatrix } from './CheckMatrix'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';
  offlineCount = 0;
  offlineMode: any = null;
  offlineError = '';
  constructor(private auth: FormioAuthService, private router: Router) {
    this.auth.onLogin.subscribe(() => {
      this.router.navigate(['/home']);
    });

    this.auth.onLogout.subscribe(() => {
      this.router.navigate(['/auth/login']);
    });

    this.auth.onRegister.subscribe(() => {
      this.router.navigate(['/home']);
    });

    // Register our custom components.
    FormioForm.registerComponent('checkmatrix', CheckMatrix);
  }
}

CheckMatrix.ts

import { TableComponent } from 'formiojs/lib/components/table/Table';
import { FormioForm } from 'formiojs/full';
import _ from 'lodash';

/**
 * An example CheckMatrix component that 
 */
export class CheckMatrix extends TableComponent {
  build() {
    this.element = this.ce('div', {
      class: 'table-responsive'
    });
    this.createLabel(this.element);

    let tableClass = 'table ';
    _.each(['striped', 'bordered', 'hover', 'condensed'], (prop) => {
      if (this.component[prop]) {
        tableClass += `table-${prop} `;
      }
    });
    const table = this.ce('table', {
      class: tableClass
    });

    // Build the body.
    const tbody = this.ce('tbody');
    this.inputs = [];
    for (let i = 0; i < this.component.numRows; i++) {
      const tr = this.ce('tr');
      this.inputs.push([]);
      for (let j = 0; j < this.component.numCols; j++) {
        const td = this.ce('td');
        this.inputs[i][j] = this.ce('input', {
          type: 'checkbox'
        });
        td.appendChild(this.inputs[i][j]);
        tr.appendChild(td);
      }
      tbody.appendChild(tr);
    }
    table.appendChild(tbody);
    this.element.appendChild(table);
  }

  getValue() {
    let value = [];
    _.each(this.inputs, (row, rowIndex) => {
      value[rowIndex] = [];
      _.each(row, (col, colIndex) => {
        value[rowIndex][colIndex] = !!col.checked;
      });
    });
    return value;
  }

  setValue(value) {
    if (!value) {
      return;
    }
    _.each(this.inputs, (row, rowIndex) => {
      if (!value[rowIndex]) {
        return false;
      }
      _.each(row, (col, colIndex) => {
        if (!value[rowIndex][colIndex]) {
          return false;
        }
        let checked = value[rowIndex][colIndex] ? 1 : 0;
        col.value = checked;
        col.checked = checked;
      });
    });
  }
}

component.json

{
  "type": "checkmatrix",
  "input": true,
  "numRows": 5,
  "numColumns": 5,
  "label": "Check Matrix",
  "key": "checkMatrix"
}