There was a previous inquiry regarding Changing Colour of Specific Data, which can be found here: Changing colour of specific data
Building upon that question, I now have a new query. After successfully changing the 2017 dates to pink, I am seeking a way to display the 2018 dates in blue. How can I introduce a second date? Even better, is there a method to automatically alternate colors for each year without manual input? For now, I would appreciate guidance on adding a second year using the existing solution.
Json file:
[
{
"id": 1,
"month": "2017-03-01"
}
{
"id": 2,
"month": "2017-04-01"
}
{
"id": 3,
"month": "2017-05-01"
}
{
"id": 4,
"month": "2017-06-01"
}
{
"id": 5,
"month": "2017-07-01"
}
{
"id": 6,
"month": "2017-08-01"
}
{
"id": 7,
"month": "2017-09-01"
}
{
"id": 8,
"month": "2017-10-01"
}
{
"id": 9,
"month": "2017-11-01"
}
]
To address this, I considered utilizing a switch case, but my HTML currently looks like this:
<table>
<tr>
<th>Line 1</th>
<th *ngFor="let volumes of volumes" [ngClass]="{ 'pink-color': checkYear(volumes.month) }">{{ volumes.month | uppercase }}</th>
</tr>
</table>
Component.ts:
checkYear(date) {
return new Date(date).getFullYear() == 2017 ? true : false;
}
CSS:
.pink-color {
background-color: pink;
}