title: Generate table with rowspan using Angular 2
body: <p>I have a data structure like this:</p>
  
  <pre><code>    [
    "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,
        }]
      }]
    }
  ]
  </code></pre>
  
  <p>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).</p>
  
  <p>Now I want to generate a table from this:</p>
  
  <pre><code>+----------------+--------+--------+---+--------+
  |                | 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   |
  +-------+--------+--------+--------+---+--------+
  </code></pre>
  
  <p>Which means <code>rowspan</code> will be involved. However, I can’t get a grip on how to start.</p>
  
  <p>If I write</p>
  
  <pre><code>&lt;tr *ngFor="let category for categories"&gt;
      &lt;td [rowspan]="category.components.length"&gt;
  </code></pre>
  
  <p>I get</p>
  
  <pre><code>Can't bind to 'rowspan' since it isn't a known native property
  </code></pre>
  
  <p>So my question is: how to bind a template value to the rowspan property?</p>