Eliminar la etiqueta del componente host de html en angular 4

Tengo una tabla en la que quiero mostrar una fila de tabla, que es un componente. Y también quiero pasar datos a ese componente:

<table>
    <th>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
    </th>
    <tr>
        <my-component [data1]="data1" [data2]="data2"></my-component>
    </tr>
    <tr *ngFor="let item of list">
        {{item}}
    </tr>
</table>

Enmy-component, el HTML es unos pocos<td></td> con datos procesados desdedata1 ydata2.

Pero después de renderizarlo, por<my-component></my-component> mi CSS se está rompiendo resultando en todomy-component HTML (toda la fila de la tabla) que se muestra en la primera columna.

Resultado de arriba:

<table>
    <th>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
    </th>
    <tr>
        <my-component>
            <td>data1.prop1</td>
            <td>data1.prop2</td>
        </my-component>
    </tr>
    <tr *ngFor="let item of list">
        {{item}}
    </tr>
</table>

Intenté lo siguiente:

@Component({
    selector: '[my-component]',
    templateUrl: 'my-component.html'
})

<tr my-component [data1]="data1" [data2]="data2"></tr>

Pero esto da como resultado un errorCan't bind to 'data1' since it isn't a known property of 'tr'.

Además no puedo usar@Directive como quiero renderizar HTML.

¿Cómo puedo renderizar plantilla de<my-component></my-component> sin<my-component></my-component> ¿etiqueta?

Otras respuestas son de versiones anteriores de angular. Estoy usando Angular 4.3.4.

Cualquier ayuda sería apreciada..!