Angular + Typescript Demo Plunk

<!DOCTYPE html>
<html>

  <head>
    <title>angular playground</title>
    <link rel="stylesheet" href="style.css" />
    <script src="src/main.js"></script>
  </head>

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

</html>

/* Styles go here */
.rTable {
  	display: table;
  	width: 100%;
}
.rTableRow {
  	display: table-row;
}
.rTableHeading {
  	display: table-header-group;
  	background-color: #ddd;
}
.rTableCell, .rTableHead {
  	display: table-cell;
  	padding: 3px 10px;
  	border: 1px solid #999999;
}
.rTableHeading {
  	display: table-header-group;
  	background-color: #ddd;
  	font-weight: bold;
}
.rTableFoot {
  	display: table-footer-group;
  	font-weight: bold;
  	background-color: #ddd;
}
.rTableBody {
  	display: table-row-group;
}

### Angular Starter Plunker - Typescript

// 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);

//our root app component
import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {GridComponent} from './grid';
import {GridSubrowComponent} from './gridsubrow';
@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello</h2>
      <my-grid></my-grid>
    </div>
  `,
})
export class App {
  name: string;
  constructor() {
    this.name = `Plunker! v${VERSION.full}`;
  }
}

@NgModule({
  imports: [BrowserModule],
  declarations: [App, GridComponent, GridSubrowComponent],
  bootstrap: [App],
})
export class AppModule {}

{
    "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"
    },
    "plnkr": {
        "runtime": "system"
    }
}

import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { object} from './object';

@Component({
  selector: 'my-grid',
  template: `
    <div style="display:table;">
      <div style="display: table-header-group; font-weight:bold;">
        <div style="display:table-cell;padding 3px 10px;">Column A</div>
        <div style="display:table-cell;padding 3px 10px;">Column B</div>
        <div style="display:table-cell; padding 3px 10px;">Column C</div>
      </div>
      <div style="display: table-row-group;">
        <div style="display: table-row;">
          <div style="display:table-cell; padding 3px 10px;">Content A</div>
          <div style="display:table-cell; padding 3px 10px;">Content B</div>
          <div style="display:table-cell; padding 3px 10px;">Content C</div>
        </div>
       <subrow></subrow>
      </div>
      
    </div>
  `,
  
})
export class GridComponent {
  content : object[]
  
  
    
  constructor() {
    
  }
}

export class object {
  content1:string;
  content2:string;
  content3:string;
  children: object[];
}

import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';


@Component({
  selector: 'subrow',
  template: `
  
        <div style="display: table-row;">
          <div style="display:table-cell; padding 3px 10px;">SubRow 1 </div>
          <div style="display:table-cell; padding 3px 10px;">SubRow 2</div>
          <div style="display:table-cell; padding 3px 10px;">SubRow 3</div>
        </div>
    
  `,
  
})
export class GridSubrowComponent {
  
    
  constructor() {
    
  }
}