Embedding an Angular Directive in

Question

I'm trying to get an angular directive to repeat inside a <tr>. Without the directive, the code is

<tr *ngFor='let cluster of clusters'>
    <td style='display: flex; flex-direction: column; width: 40%; min-width: 300px;'>
        <span>{{ cluster.Name }}</span>
        <span>{{ cluster.StatusMessage }}</span>
    </td>
    <td style='width: 100%;'>
        ...
    </td>
</tr>

And looks like

When I refactor the directive, I lose the <tr> formatting. The refactored code is

<tr *ngFor='let cluster of clusters'>
    <cluster-row [name]='cluster.Name' [statusMessage]='cluster.StatusMessage'></cluster-row>
</tr>

The cluster-row component code is:

<td style='display: flex; flex-direction: column; width: 40%; min-width: 300px;'>
    <span>{{ name }}</span>
    <span>{{ statusMessage }}</span>
</td>
<td style='width: 100%;'>
    ...
</td>

It works, but the <tr> formatting goes away.

The developer tools show a <tr> with a <cluster-row> nested in it, and two <td>s nested in that, as I would expect.

score 3 · Accepted Answer · answered Mar 30 '17 at 17:30

3

<tr> can't contain a <cluster-row> element.

You can use an attribute selector instead like

<tr *ngFor='let cluster of clusters'>
    <td cluster-row [name]='cluster.Name' [statusMessage]='cluster.StatusMessage'></cluster-row>
</tr>

with

@Component({
//@Directive({
  selector: '[cluster-row]'

The component or directive then is the <td>, therefore you can't repeat it inside the components template

style='display: flex; flex-direction: column; width: 40%; min-width: 300px;'

can just be added to

@Component({ 
  selector: '[cluster-row]',
  styles: [...],

answered Mar 30 '17 at 17:30

Günter Zöchbauer

623,577
216
2,003
1,567

Is this because a `` can only contain a ``? I was hoping to be able to click the row to toggle different views, managed by the directive. – HaveSpacesuit Mar 30 '17 at 17:37
Not sure what you mean with " to click the row to toggle different views, managed by the directive". My answer is just about `` not supporting other children than ``. – Günter Zöchbauer Mar 30 '17 at 17:39
You can use `*ngIf` or `*ngSwitchCase` inside the component to display different content. – Günter Zöchbauer Mar 30 '17 at 17:39
1

I think I was using "directive" when I meant "component." I'm learning Angular 2 after learning Angular 1. – HaveSpacesuit Mar 30 '17 at 17:55
I see. If that does what you want, this is perfectly fine as well. – Günter Zöchbauer Mar 30 '17 at 17:56

Embedding an Angular Directive in

1 Answers1

Linked