Как применить сетку ag js к сетке ag angular, отображающую новые данные в сетке angular

Question

Как применить ag-grid js к ag-grid angular коду путем отображения новых данных?

Вот код:

список .component.ts

  columnDefs = [
    {
      headerName: "Style/Machine",
      field: "code"
    }
  ];

  monthNames = [
    {
      "monthName": "January"
    },
    {
      "monthName": "February"
    },
    {
      "monthName": "March"
    },
    {
      "monthName": "April"
    },
    {
      "monthName": "May"
    },
    {
      "monthName": "June"
    },
    {
      "monthName": "July"
    },
    {
      "monthName": "August"
    },
    {
      "monthName": "September"
    },
    {
      "monthName": "October"
    },
    {
      "monthName": "November"
    },
    {
      "monthName": "December"
    }
  ];

  rowData = [
    {
      code: "Machine 1",
      assetCode: "PRN",
      assetCount: 12,
      date: "2019-05-18 00:00:00"
    },
    {
      code: "Machine 1",
      assetCode: "PRN 1",
      assetCount: 10,
      date: "2019-01-19 00:00:00"
    },
    {
      code: "Machine 2",
      assetCode: "PRN 1",
      assetCount: 3,
      date: "2019-01-20 00:00:00"
    },
    {
      code: "Machine 3",
      assetCode: "PRN",
      assetCount: 1,
      date: "2019-01-21 00:00:00"
    },
    {
      code: "Machine 4",
      assetCode: "PRN 1",
      assetCount: 3,
      date: "2019-06-22 00:00:00"
    },
    {
      code: "Machine 5",
      assetCode: "PRN 1",
      assetCount: 3,
      date: "2019-03-23 00:00:00"
    }
  ];

  columns: any = [];
  assetColIndex: any = null;
  date: any = null;
  year: any = null;

  gridOptions = {
    defaultColDef: {
      sortable: true,
      filter: true
    },
    columnDefs: this.columnDefs,
    animateRows: true,
    enableRangeSelection: true,
    rowData: [] as any
  };

  constructor() {

  }

  ngOnInit() {
    this.setGrid();
  }

  setGrid() {
    this.rowData.map((data: any) => {
      const date = new Date(data.date);
      const year = ('' + date.getFullYear()).slice(-2);
      const assetColIndex = data.assetCode + '_' + date.getMonth() + '_' + year;

      if (this.columns.indexOf(assetColIndex) === -1) {
        this.columns.push(assetColIndex);
      }
    });

    // console.log(this.rowData, '---');
    const dataByMonthYr = this.rowData.reduce((dataByMonthYear: any, datum: any) => {
      const date = new Date(datum.date);
      const year = ('' + date.getFullYear()).slice(-2);
      const monthYear = this.monthNames[date.getMonth()].monthName + '\'' + year;
      const assetColIndex = datum.assetCode + '_' + date.getMonth() + '_' + year;

      let dataIndex = dataByMonthYear.findIndex((data: any) => data.code === datum.code);
      // console.log(dataIndex);

      if (dataIndex === -1) {
        dataByMonthYear.push({ code: datum.code });
        dataIndex = dataByMonthYear.length - 1;
      }

      // console.log(this.columns);
      let count = 0;

      this.columns.forEach((column: any) => {
        count = column === assetColIndex ? datum.assetCount : 0;

        dataByMonthYear[dataIndex][column] = (dataByMonthYear[dataIndex][column] || 0) + count;
      });

      const colHeaderIndex = this.columnDefs.findIndex((data: any) => data.headerName === monthYear);
      if (colHeaderIndex !== -1) {
        const colIndex = this.columnDefs[colHeaderIndex].children.findIndex((data: any) => data.field === assetColIndex);
        if (colIndex === -1) {
          this.columnDefs[colHeaderIndex].children.push(
            {
              'headerName': datum.assetCode,
              'field': assetColIndex,
              'aggFunc': this.customAggFunction
            }
          );
        } else {
          this.columnDefs.push(
            {
              'headerName': monthYear,
              'code': date.getMonth + '_' + year,
              'children': [
                {
                  'headerName': datum.assetCode,
                  'field': assetColIndex,
                  'aggFunc': this.customAggFunction
                }
              ]
            }
          );
        }
      }

      return dataByMonthYear;
    }, []);

    this.columnDefs.sort((a: any, b: any) => {
      if (a.code < b.code) { return -1; }
      return 0;
    });

    console.log(this.columnDefs, dataByMonthYr);
  }

list.component. html

<ag-grid-angular 
    #gridTable 
      [columnDefs]="columnDefs" 
      [rowData]="rowData"
      [showCreateBtn]="false"
      style="width:100%" 
      [autoSizeColumnsOnResize]="false" 
      [pinnedBottomRowData]="pinnedBottomRowData"
      (gridReady)="onGridReady($event)">

</ag-grid-angular>

Как отобразить dataByMonthYr или данные? этот код взят из JS кода

document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);
    gridOptions.api.setRowData(dataByMonthYear);

});

как его применять в angular?

, что я хочу сделать, это применить его в angular.

вот вывод console.log(this.columnDefs, dateByMonthYr)

как я добавлю его в ag-grid?

Заранее спасибо.