PrimeNG-table checkbox template

<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/main.js"></script>
  </head>

  <body>
    <my-app>
      loading...
    </my-app>
  </body>
</html>

//our root app component
import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {ButtonModule} from 'primeng/button';
import {TableModule} from 'primeng/table';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule }    from '@angular/forms';
import { HttpClientModule }    from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';

@Component({
  selector: 'my-app',
  template: `
    <div class="content-section implementation">
    <p-table #dt [columns]="cols" [value]="cars" selectionMode="multiple" [(selection)]="selectedCars">
        <ng-template pTemplate="caption">
            <div class="ui-helper-clearfix">
                <button type="button" pButton icon="fa-file-o" iconPos="left" label="All Data" (click)="dt.exportCSV()" style="float:left"></button>
                <button type="button" pButton icon="fa-file-o" iconPos="left" label="All Data - Custom File Name" (click)="dt.exportCSV({exportFilename:'myData'})" style="float:left"></button>                                                               
                <button type="button" pButton icon="fa-file" iconPos="left" label="Selection Only - Custom File Name" (click)="dt.exportCSV({exportFilename:'myData',selectionOnly:true})" style="float:right"></button> 
                <button type="button" pButton icon="fa-file" iconPos="left" label="Selection Only" (click)="dt.exportCSV({selectionOnly:true})" style="float:right"></button>
            </div>
        </ng-template>
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns">
                    {{col.header}}
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr [pSelectableRow]="rowData">
                <td *ngFor="let col of columns">
                    {{rowData[col.field]}}
                </td>
            </tr>
        </ng-template>
    </p-table>
</div>
  `,
})
export class App {
  name: string;
  cols: any[];
  constructor() {
    this.name = `Angular! v${VERSION.full}`;
    this.cols = [
            { field: 'vin', header: 'Vin' },
            { field: 'year', header: 'Year' },
            { field: 'brand', header: 'Brand' },
            { field: 'color', header: 'Color' }
        ];
  }
}

@NgModule({
  imports: [BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,ButtonModule,TableModule],
  declarations: [App],
  bootstrap: [App],
})
export class AppModule {}

// Shim the environment
import 'core-js/client/shim';

// Angular requires Zones to be pre-configured in the environment
import 'zone.js';
import 'zone.js/dist/long-stack-trace-zone';

//main entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.js';

platformBrowserDynamic().bootstrapModule(AppModule);

/* Add your styles here */

{
    "name": "@plnkr/starter-angular",
    "version": "1.0.0",
    "description": "Angular starter template",
    "dependencies": {
        "@angular/common": "^5.2.4",
        "@angular/compiler": "^5.2.4",
        "@angular/core": "^5.2.4",
        "@angular/platform-browser": "^5.2.4",
        "@angular/platform-browser-dynamic": "^5.2.4",
        "core-js": "^2.5.3",
        "rxjs": "^5.5.6",
        "zone.js": "^0.8.20",
        "primeng": "^5.2.5"
    },
    "plnkr": {
        "runtime": "system",
        "useHotReload": true
    }
}

{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}