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
  • 13,729
  • 18
  • 91
  • 187

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,687
  • 1
  • 10
  • 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,115
  • 1
  • 21
  • 41
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>
Nithya Rajan
  • 4,722
  • 19
  • 30
StepUp
  • 36,391
  • 15
  • 88
  • 148
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
  • 186
  • 10