Eu tenho uma tabela na qual desejo exibir uma linha da tabela, que é um componente. E também quero passar dados para esse 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>

Nomy-component, o HTML é alguns<td></td> com dados renderizados dedata1 edata2.

Mas depois de renderizá-lo, por causa de<my-component></my-component> meu CSS está quebrando, resultando em tudomy-component HTML (linha inteira da tabela) exibido na 1ª coluna.

Resultado acima:

<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>

Eu tentei o seguinte:

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

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

Mas isso resulta em erroCan't bind to 'data1' since it isn't a known property of 'tr'.

Também não posso usar@Directive como eu quero renderizar HTML.

Como posso renderizar o modelo de<my-component></my-component> sem<my-component></my-component> etiqueta, rótulo, palavra-chave?

Outras respostas são de versões anteriores do angular. Estou usando o Angular 4.3.4.

Qualquer ajuda seria apreciada..!