Reputation: 1060
I am trying to generate a table where I have another component plug in. Let me explain it with help of example:
action.component.html
<ul *ngFor="let action of actions" class="dropdown-menu dropdown-menu-right">
<li><a href="" data-toggle="modal" [attr.data-target]=[action.target]>{{action.text}}</a></li>
</ul>
And the above html is available in tag
<app-actions></app-actions>
And now i have another component where I am using above component:
<tr>
<td>Sample text</td>
<td>Sample text</td>
<td>Employee</td>
<td>
<app-actions></app-actions>
</td>
</tr>
But the issue is in app-actions I am only able to see last li
element of actions object.
Upvotes: 0
Views: 52
Reputation: 205
I think your *ngFor is wrong. Can you try with this:
<ul class="dropdown-menu dropdown-menu-right">
<li *ngFor="let action of actions">
<a href="" data-toggle="modal" [attr.data-target]=[action.target]>
{{action.text}}
</a>
</li>
</ul>
Upvotes: 1