Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
72
rated 0 times [  75] [ 3]  / answers: 1 / hits: 17916  / 6 Years ago, sat, february 3, 2018, 12:00:00

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.


More From » angular

 Answers
10

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'}.....]

[#55277] Wednesday, January 31, 2018, 6 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
lawrencem

Total Points: 153
Total Questions: 102
Total Answers: 98

Location: Mauritania
Member since Sun, Oct 17, 2021
3 Years ago
lawrencem questions
;