Angular components as table rows

components.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app',
  template: `
    <table>
      <tr magicrow msg="hello"></tr>
      <tr magicrow msg="world"></tr>
    </table>
  `,
})
export class AppComponent {}


@Component({
  selector: 'tr[magicrow]',
  template: `
    <td>{{msg}}</td>
  `
})
export class RowComponent {
  @Input() msg: string
}

main.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppComponent, RowComponent } from './components';

@NgModule({
    imports: [ BrowserModule ],
    declarations: [ AppComponent, RowComponent ],
    bootstrap: [ AppComponent ]
})
class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);