1

I have in Angular 7 the following:

<th *ngFor="let day of weekDays"><div>{{day}}</div></th>

but want to set the <th id="today" for the single element among all weekDays that corresponds/equals to today.

Given that:

  this.today = "Fri 5/7";

The result should be:

<th id="today"><div>Fri 5/7</div></th>
<th><div>Sat 6/7</div></th>
<th><div>Sun 7/7</div></th>
<th><div>Mon 8/7</div></th>
<th><div>Tue 9/7</div></th>
<th><div>Wed 10/7</div></th>
<th><div>Thu 11/7</div></th>

How do I do that?

SkyWalker
  • 12,709
  • 16
  • 76
  • 161

4 Answers4

4

Try something like this 

 <th *ngFor="let day of weekDays" [attr.id]="today==day?'today':null"><div>{{day}}</div></th>
suresh bambhaniya
  • 1,592
  • 1
  • 12
  • 20
1

you should call a function which set id depending on date:

<th *ngFor="let day of weekDays" [attr.id]="returnStringBasedOnCondition()"><div>{{day}}</div></th>

and you can use following links to get today :

How to check if input date is equal to today's date?

get current date with 'yyyy-MM-dd' format in Angular 4

Amrit
  • 2,047
  • 17
  • 40
1

You can add conditionally attribute like that. If null it will remove your attribute:

<th *ngFor="let day of weekDays" 
    [attr.id]="value === day ? 'today' : null">
    <div>{{day}}</div>
</th>
Bear Nithi
  • 4,374
  • 15
  • 28
StepUp
  • 30,747
  • 12
  • 76
  • 133
0

You could do something like that:

<th *ngFor="let day of weekDays" [id.today]="isToday()"><div>{{day}}</div></th>

And of course add the function isToday() in your typescript. I usually use conditional classes and never tried with conditional IDs but this should work.

Romaric
  • 176
  • 10