How to use Angular2 templates with ngFor to create a table out of nested arrays

Question

Given the following array in component property groups                name    pencils         items     red pencil   blue pencil   yellow pencil                    name    rubbers         items     big rubber   small rubber             How to create a html table with all items  each in one row  The expected HTML result    lt table gt       lt tr gt  lt td gt  lt h1 gt pencils lt  h1 gt  lt  td gt  lt  tr gt       lt tr gt  lt td gt red pencil lt  td gt  lt  tr gt       lt tr gt  lt td gt blue pencil lt  td gt  lt  tr gt       lt tr gt  lt td gt yellow pencil lt  td gt  lt  tr gt       lt tr gt  lt td gt  lt h1 gt rubbers lt  h1 gt  lt  td gt  lt  tr gt       lt tr gt  lt td gt big rubber lt  td gt  lt  tr gt       lt tr gt  lt td gt small rubber lt  td gt  lt  tr gt   lt  table gt    The first level is easy    lt table gt       lt tr  ngFor   group of groups  gt           lt td gt  lt h1 gt   group name   lt  h1 gt  lt  td gt       lt  tr gt   lt  table gt    But now I have to iterate  item of group  The problem is that I need the new  lt tr gt  elements after the  lt  tr gt  element which defines group  not inside   Is there any solution for this kind of problems in Angular2 templating  I would expect some special tag which I could use instead of  lt tr gt  which is not written into the dom  Something similar to facets and fragments in JSF

User · Answer

lt tbody   ngFor  quot let defect of items quot  gt                         lt tr gt               lt td gt   defect param1   lt  td gt               lt td gt   defect param2   lt  td gt               lt td gt   defect param3   lt  td gt                               lt td gt   defect param4   lt  td gt               lt td gt   defect param5    lt  td gt               lt td gt   defect param6   lt  td gt               lt td gt   defect param7   lt  td gt                        lt  tr gt             lt tr gt               lt td gt   lt strong gt  Notes  lt  strong gt  lt  td gt               lt td colspan  quot 6 quot  gt    defect param8                lt  td gt  enter code here             lt  tr gt                     lt  tbody gt

User · Answer

You can use the template syntax of ngFor on groups and the usual syntax inside it for the actual rows like    lt table gt     lt template let-group ngFor  ngForOf   groups  gt       lt tr  ngFor  let row of group items  gt   row   lt  tr gt     lt  template gt   lt  table gt    Check this plunk

User · Answer

Try this  The scope of local variables defined by  template  directive    lt table gt     lt template ngFor let-group   implicit   ngForOf   groups  gt       lt tr gt         lt td gt           lt h2 gt   group name   lt  h2 gt         lt  td gt       lt  tr gt       lt tr  ngFor  let item of group items  gt                   lt td gt   item   lt  td gt               lt  tr gt     lt  template gt   lt  table gt

User · Answer

it s not exact output that you wanted but maybe something like this will do  Parent cmp    lt table gt     lt item  ngFor   i of items   data   i  gt  lt  item gt   lt  table gt    Child cmp  import  Component  from  angular2 core     Component     selector   item     inputs    data      template         lt tr gt  lt td gt   data name   lt  td gt  lt  tr gt       lt tr  ngFor   i of data items  gt         lt td gt  lt h1 gt   i   lt  h1 gt  lt  td gt       lt  tr gt         export default class Item

User · Answer

Here is a basic approach - it sure can be improved - of what I understood to be your requirement   This will display 2 columns  one with the groups name  and one with the list of items associated to the group   The trick is simply to include a list within the items cell    lt table gt     lt thead gt       lt th gt Groups Name lt  th gt       lt th gt Groups Items lt  th gt     lt  thead gt     lt tbody gt       lt tr  ngFor  let group of groups  gt         lt td gt   group name   lt  td gt         lt td gt           lt ul gt             lt li  ngFor  let item of group items  gt   item   lt  li gt           lt  ul gt         lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt

User · Answer

I am a fan of keeping logic out of the template as much as possible   I would suggest creating a helper function that returns the data that you care about to the template   For instance   getItemsForDisplay   String      return    concat apply    this groups map group   gt  group items          lt tr  ngFor  let item of getItemsForDisplay    gt  lt td gt   item   lt  td gt  lt  tr gt   This will let you keep your presentation free of special logic   This also lets you use your datasource  directly

User · Answer

This worked for me    lt table gt     lt tr gt       lt td  ngFor   group of groups  gt          lt h1 gt   group name   lt  h1 gt      lt  td gt     lt  tr gt   lt  table gt

User · Answer

lt table gt        lt ng-container  ngFor  let group of groups  gt            lt tr gt  lt td gt  lt h2 gt   group name   lt  h2 gt  lt  td gt  lt  tr gt            lt tr  ngFor  let item of group items  gt  lt td gt   item   lt  td gt  lt  tr gt        lt  ng-container gt   lt  table gt

[angular] How to use Angular2 templates with *ngFor to create a table out of nested arrays?

Examples related to angular

Examples related to angular2-template

Examples related to angular-template