angular 5: template binding within table row - html

Question

How do you bind a template containing tds within a tr?
I have a table that I want column sections to be dynamically added/removed/rearranged.
My tds are grouped into categories, the user can pick categories, and then the sections of the table should be pieced together with if/then logic using the category ids.
I'm having trouble binding my category templates into tr. I've tried:
setting the component selector to "app-componentName" and inputting the component using <app-componentName></app-componentName>
setting the component selector to "[app-componentName]" and inputting the component using <template app-componentName></template>
but neither works correctly. Using the first option, all of the data from my category is put into one td. Using the second option, none of my categories show up at all.
Here's the gist...
table-row.component.ts
...
var selectedCategories = [
{
id: 2,
name: "billing address"
},
{
id: 1,
name: "name"
}
];
...
table-row.component.html
<ng-container *ngFor="let category of selectedCategories">
<app-name-cells [person]="person" *ngIf="category.id === 1">
<app-billing-address-cells [person]="person" *ngIf="category.id === 2">
</ng-container>
name-cells.component.html
<td>{{user.firstName}}</td>
<td>{{user.middleName}}</td>
<td>{{user.lastName}}</td>
billing-address-cells.component.html
<td>{{user.billingAddress.line1}}</td>
<td>{{user.billingAddress.line2}}</td>
<td>{{user.billingAddress.city}}</td>
<td>{{user.billingAddress.state}}</td>
<td>{{user.billingAddress.zip}}</td>
Result
//full address in first cell, full name in second cell
|| 123 Main St New York NY 12345 | John A Doe ||
Expected Result
// each part of each component in it's own cell
|| 123 Main St | New York | NY | 12345 | John | A | Doe ||
Edit - Added StackBlitz:
See code example: StackBlitz