Using ag-grid with Aurelia Framework

ag-grid.js

import { bindable, inlineView } from 'aurelia-framework';
import * as ag from 'ag-grid';

@inlineView(`
    <template class="ag-fresh" style="align-self: stretch; flex-grow: 1; -ms-flex: 0 1 auto; flex: 1 1 100%;">
    </template>
`)
export class AgGrid {
    @bindable columns;
    @bindable rows;
    @bindable pageSize;

    constructor() {
        this.pageSize = 10;
        this.rows = [];
    }

    attached() {
        let cols = this.columns.map(function(col) {
            return {
                headerName: col.headerName,
                field: col.field
            };
        });

        let gridOptions = {
            columnDefs: cols,
            rowData: this.rows,
            rowSelection: 'single',
            rowHeight: 25,
            pageSize: this.pageSize,
            enableColResize: true,
            enableSorting: true,
            enableFilter: true,
            debug: false
        };

        var eGridDiv = document.querySelector('#eGridDiv');
        this.gridOptions = gridOptions;
        new ag.Grid(eGridDiv, gridOptions);
        this.gridOptions.api.sizeColumnsToFit();

        this.gridCreated = true;
    }

    rowsChanged(newValue, oldValue) {
        if (this.gridCreated && newValue && newValue.length) {
            this.gridOptions.api.setRowData(newValue);
            this.gridOptions.api.refreshView();
        }
    }
}

customers.html

<!-- customer.html -->
<template>
    <require from="./ag-grid.js"></require>

    <div style="height: 6%;">
      Page Size: ${pageSize}
        <select id="pageSizeSelect" ref="pageSizeSelect" value.bind="pageSize">
          <option value="10" selected>10</option>
          <option value="20">20</option>
          <option value="40">40</option>
          <option value="50">50</option>
        </select>
        Total: ${customers.length}
    </div>
    
    <!-- use the ag-grid component -->
    <ag-grid id="eGridDiv" columns.bind="gridColumns" rows.bind="customers" pagesize.bind="pageSize"></ag-grid>

</template>

customers.js

import {inject} from 'aurelia-framework';
import {CustomerService} from './customerService';

@inject(CustomerService)
export class Customers {
    constructor(customerService) {
      this.customerService = customerService;
      
      this.gridColumns = [
            { headerName: '#', field: "customerId", width: 5, checkboxSelection: true, suppressMenu: true},
            { headerName: "First Name", field: "fname",filter: 'text' },
            { headerName: "LastName", field: "lname", filter: 'text' },
            { headerName: "Country", field: "country", filter: 'text' }
        ];

        this.pageSize = 10;
    }

    activate(){
        return this.search();
    }

    search(){
        //Call API through the service to fetch all customers...
        return this.customerService.getAll()
                    .then(customers => {
                        this.customers = customers;
                    });
    }
}

Hi - I'm trying use ag_grid in my app using TypeScript. How did you install ag-Grid into your project? I'm trying to understand this line of code: import * as ag from 'ag-grid';