Tavish Aggarwal
Tavish Aggarwal

Reputation: 1060

Adding ngFor from one component to table Angular

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

Answers (1)

Iulian Cucoanis
Iulian Cucoanis

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

Related Questions