How to dynamically add colspan to different <th> in table (Angular 4)

Question

I have a table in this form:

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

.blue {
    background-color: blue;
}

.green {
  background-color: green;
}

.red {
  background-color: red;
}

<table>
  <thead>
    <tr>
      <th class="blue">item 1</th>
      <th class="green" colspan="2">item 2</th>
      <th class="red" colspan="3">item 3</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
    </tr>
    
  </tbody>
</table>

I would like to dynamically add colspan and colors to different th tag in angular 4: In my angular application I have:

.html file

<tr *ngFor="let item of items">
  <th>{{ item }}</th>
</tr>

.ts file

items: string[] = ['item 1', 'item 2', 'item 3']

how to add these different colspans and colors (look at the snippet what I want to achieve)? Thank you very much.

Answer 1

I think, This must work,

<tr *ngFor="let item of items">
  <th [attr.colspan]="item.colspan">{{ item.name }}</th>
</tr>

where Items are like,

items: any = [{colspan:1,name:'item 1'}, {colspan:3,name:'item 2'}.....]

Answer 2

You can still add color property to your item so that you can bind to it using [ngClass]="item.color"