Create a table using 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, the list of categories with all competencies in this category and for each type of competency is an entry for each user (therefore, the number of users will be equal for each competency).

Now I want to create 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 | +-------+--------+--------+--------+---+--------+ 

This means that rowspan will be enabled. However, I cannot figure out how to get started.

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 a rowspan property?

Answer 1

Rowspan itself is not a property of its own; it is an attribute. So, you need to access the rowspan attribute of the element as follows:

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

This should do the trick, and now you are setting the value for rowspan . You should use attribute binding if the element property does not exist for the binding. If you want to know more about this, check out the official documentation.