Formatting data in tables in Angular 8 not working

I am new to Angular. Here I am trying to format JSON data being displayed on a table. Here is what I am trying to achieve, for empty rows, instead of being blank , I fill them with a hyphen, values greater than 25 I fill there individual cells background with red color, values between 20 and 25 i fill them with yellow color, but for some weird reason my table is not being formatted completely, it is like it is not detecting the ngAfterViewInit() function, also when i try to get the average of all the columns i am getting the result as NaN for all columns.

My component.ts file

@ViewChild('myTable', {static: false}) myTable: ElementRef;

 ngAfterViewInit() {

    var table = this.myTable.nativeElement;
    var row;
    var cell;
    var j = 1;
    var r = 0;
    var t = 0;
    //console.log(table);
    if (table !== null) {
      while (row = table.rows[r++]) {
        var c = 0;
        while (cell = row.cells[c++]) {
          var cellValue = cell.innerHTML;
          //cell.innerHTML='[Row='+r+',Col='+c+']'; // do sth with cell
          if (c === 5 && cellValue > 25) {
            cell.style.background="#FF0000";
          } else if (c === 5 && cellValue >= 10 && cellValue < 25) {
            cell.style.background="#FFFF00";
          }

        }
      }
      //getting the average value of each column
      var colL = table.rows.length - 1;
      //console.log(table.rows[1].cells.length);
      for (j = 1; j < table.rows[1].cells.length; j++) {
        var sumVal = 0;
        for (var i = 1; i < table.rows.length; i++) {
          if (i < colL) {
           //console.log(table.rows[i].cells[1].innerHTML);
            if (Number.isInteger(parseInt(table.rows[i].cells[j].innerHTML)) === true) {
              sumVal = sumVal + parseFloat(table.rows[i].cells[j].innerHTML);
            } else {
              table.rows[i].cells[j].value = "-";
              table.rows[i].cells[j].style.backgroundColor = "#FFFF00";
            }
          }
         // console.log(table.rows[colL].cells[table.rows.length - 1].innerHTML);
        }

        //Setting the last cell with the avirrage value
        if (table.rows[colL].cells[j] !== table.rows[colL].cells[table.rows[1].cells.length - 2]) {
          var ans = (sumVal / (table.rows.length - 2)).toFixed(2);
          table.rows[colL].cells[j].innerHTML = ans;
        } else
          table.rows[colL].cells[j].innerHTML = sumVal;

        //Taking out all cells with zore totals
        if (parseFloat(ans) === 0) {
          for (t = 0; t <= colL; t++) {
            table.rows[t].cells[j].style.display = 'none';
          }
        }

      }
    }
  }
}

My beginning of the Table

 <div class="panel-body" >
        <div class="table-responsive">
          <table class="table table-hover" #myTable>
            <thead>

My beginning of the rows

<tr class="even gradeC" style="text-align:center" ng-repeat="home in homeurban"
                *ngFor="let home of homeurban">
              <td class="infos" style="position: absolute;  top: auto;  width: 100.5px;">{{home.teamNumber}}</td>

What I am doing wrong? Thanks in advance