Adding ngFor from one component to table Angular

Question

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.

Iulian Cucoanis · Accepted Answer · 2017-12-19 13:42:27Z

1

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>

answered Dec 19, 2017 at 13:42

Iulian Cucoanis

2053 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tavish Aggarwal Over a year ago

Oops. Very bad of me. Thanks!

Collectives™ on Stack Overflow

Adding ngFor from one component to table Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related