Wijmo 5 - AngularJS directives

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.chart.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/interop/angular/wijmo.angular.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.pdf.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.pdf.min.js"></script>
<!-- mark this as an Angular application and give it a controller -->
<br/>
<br/>
<br/>
<div ng-app="app" ng-controller="appCtrl" class="container">
   <wj-flex-grid
      items-source="data"
      initialized="initGrid(s,e)"
      allow-resizing="Both"
      group-footers="true">
      <wj-flex-grid-filter></wj-flex-grid-filter>
      <wj-flex-grid-column binding="country"></wj-flex-grid-column>
      <wj-flex-grid-column binding="product" word-wrap="true"></wj-flex-grid-column>
      <wj-flex-grid-column binding="color"></wj-flex-grid-column>
      <wj-flex-grid-column binding="sales" format="n2" aggregate="Sum"></wj-flex-grid-column>
      <wj-flex-grid-column binding="expenses" format="n2" aggregate="Sum"></wj-flex-grid-column>
      <wj-flex-grid-column binding="discount" format="p0"></wj-flex-grid-column>
   </wj-flex-grid>
   <button id="export">Export</button>
</div>

CSS

.header {
    background-color: #00C1D5;    
    margin-bottom: 12pt;
    color: #dcf3f6;
}

/* grid style */
.wj-flexgrid {
    border: 2px solid grey;
    border-radius: 4px;
    max-height: 350px;
}
    /* style for column footers */
.wj-flexgrid .wj-colfooters .wj-cell {
  border-top: 1px solid #4cff00;
  background-color: #00C1D5;
}

/* style for custom group footer rows */
.wj-flexgrid .wj-group.wj-groupfooter:not(.wj-state-selected):not(.wj-state-multi-selected) {
  background-color: #00C1D5;
  font-weight: bold;
}
.wj-cells .wj-cell {
    font-family: ipaexg;
}

TypeScript

// define app, include Wijmo 5 directives
var app = angular.module('app', ['wj']);

// controller
app.controller('appCtrl', function($scope) {
    $scope.grid = null;
    // expose some data
    $scope.data = new wijmo.collections.CollectionView(getData(5));

    // add a footer row to the grid
    $scope.initGrid = function(s, e) {
        $scope.grid = s;
        // create a GroupRow to show aggregates automatically
        var row = new wijmo.grid.GroupRow();

        // add the new GroupRow to the grid's 'columnFooters' panel
        s.columnFooters.rows.push(row);

        // add a sigma to the header to show that this is a summary row
        s.bottomLeftCells.setCellData(0, 0, '\u03A3');
        s.rows.defaultSize = 150;
    }

    document.getElementById("export").addEventListener("click", e => {
        $scope.grid.beginUpdate();
        var oldPageSize = $scope.grid.collectionView.pageSize;
        var oldPageIndex = $scope.grid.collectionView.pageIndex;
        $scope.grid.collectionView.pageSize = 0;
        var oldGroupConfig = [];

        wijmo.grid.pdf.FlexGridPdfConverter.export($scope.grid, "FlexGrid.pdf", {
            documentOptions: {
                pageSettings: {
                    layout: wijmo.pdf.PdfPageOrientation.Portrait
                },
                footer: {
                    declarative: {
                        text: '\t&[Page]\\&[Pages]'
                    }
                }
            },
            embeddedFonts: [{
                source: 'https://demo.grapecity.com/wijmo/sample/fonts/ipaexg.ttf',
                name: 'ipaexg'
            }],
            styles: {
                cellStyle: {
                    font: {
                        family: 'ipaexg'
                    },
                    backgroundColor: '#ffffff',
                    borderColor: '#c6c6c6'
                },
                altCellStyle: {
                    backgroundColor: '#f9f9f9'
                },
               ...