Generate table with rowspan using Angular 2

Question

I have a data structure like this:

    [
  "category1": {
    "name": "Cat 1",
    "competences": [{
      "name": "Comp 1",
      "users": [{
        "name": "user1",
        "level": 99,
      }, {
        "name": "user2",
        "level": 99,
      },… {
        "name": "userN",
        "level": 9001,
      }]
    }, {
      "name": "Comp 2",
      "users": [{
        "name": "user1",
        "level": 99,
      }, {
        "name": "user2",
        "level": 99,
      },… {
        "name": "userN",
        "level": 9001,
      }]
    }]
  },
  "category2": {
    "name": "Cat 2",
    "competences": [{
      "name": "Comp 3",
      "users": [{
        "name": "user1",
        "level": 99,
      }, {
        "name": "user2",
        "level": 99,
      },… {
        "name": "userN",
        "level": 9001,
      }]
    }, {
      "name": "Comp 4",
      "users": [{
        "name": "user1",
        "level": 99,
      }, {
        "name": "user2",
        "level": 99,
      },… {
        "name": "userN",
        "level": 9001,
      }]
    },… {
      "name": "Comp N",
      "users": [{
        "name": "user1",
        "level": 99,
      }, {
        "name": "user2",
        "level": 99,
      },… {
        "name": "userN",
        "level": 9001,
      }]
    }]
  },
  "categoryN": {
    "name": "Cat N",
    "competences": [{
      "name": "Comp 5",
      "users": [{
        "name": "user1",
        "level": 99,
      }, {
        "name": "user2",
        "level": 99,
      },… {
        "name": "userN",
        "level": 9001,
      }]
    }]
  }
]

Basically a list of categories, with all competences within that category, and for each competence type, a record for every user (so the number of users will be equal for each competence).

Now I want to generate a table from this:

+----------------+--------+--------+---+--------+
|                | user 1 | user 2 | … | user N |
+-------+--------+--------+--------+---+--------+
| Cat 1 | Comp 1 | 99     | 99     | … | 9001   |
|       +--------+--------+--------+---+--------+
|       | Comp 2 | 99     | 99     | … | 9001   |
+-------+--------+--------+--------+---+--------+
| Cat 2 | Comp 3 | 99     | 99     | … | 9001   |
|       +--------+--------+--------+---+--------+
|       | Comp 4 | 99     | 99     | … | 9001   |
|       +--------+--------+--------+---+--------+
|       | …      | …      | …      | … | …      |
+       +--------+--------+--------+---+--------+
|       | Comp N | 99     | 99     | … | 9001   |
+-------+--------+--------+--------+---+--------+
| Cat 3 | Comp 5 | 99     | 99     | … | 9001   |
|       +--------+--------+--------+---+--------+
|       | Comp 6 | 99     | 99     | … | 9001   |
+-------+--------+--------+--------+---+--------+

Which means rowspan will be involved. However, I can’t get a grip on how to start.

If I write

<tr *ngFor="let category for categories">
    <td [rowspan]="category.components.length">

I get

Can't bind to 'rowspan' since it isn't a known native property

So my question is: how to bind a template value to the rowspan property?

Answer 1

Rowspan itself is no native property, it's an attribute. So what you have to do is to access the element's rowspan attribute as follows:

<td [attr.rowspan]="category.components.length"></td>

That should do the trick and you are now setting the value for rowspan. You must use attribute binding when there is no element property to bind to. If you want to read more on that, check out the official documentation.