How to make click event optional in an angular 2 *ngFor loop

Question

I am making a weekly calendar, where users can click the days of the week in the calendar header to highlight the events on that day:

<thead>
    <tr>
        <td *ngFor="let day of days | async"
            (click)="highlightWeek(day)">{{day.header}}</td>
    </tr>
</thead>

I would like to make it so that when there are no when there are no events on a given day, then the header for that day is not clickable. This could be done in the component like so:

highlightWeek(day) {
    if (day.events.length > 0) {
        ...

But if I do this, then the browser still changes the form of the cursor from the arrow to the hand, whenever the user hovers over the empty day headers. I would like to only have the click event on the days where there are event, so this doesn't happen. Something like this:

<thead>
    <tr>
        <td *ngFor="let day of days | async"
            (if (day.events.length > 0)): (click)="highlightWeek(day)">{{day.header}}</td>
    </tr>
</thead>

But I don't know how to accomplish that.

Peter Salomonsen · Accepted Answer · 2017-08-09T11:58:34.790

Put the loop in an ng-container and then you can have one td displaying if it should be clickable and another if not. Like this:

<thead>
 <tr>
    <ng-container *ngFor="let day of days | async">
      <td (click)="highlightWeek(day)" style="cursor: pointer" *ngIf="day.events.length>0">
        {{day.header}}
      </td>
      <td *ngIf="day.events.length===0" style="cursor: default">{{day.header}}</td>
    </ng-container>
 </tr>
</thead>

score 2 · Answer 2 · answered Aug 09 '17 at 11:43

2

The cursor changes to pointer because of CSS rules, not because you have a binding on the click event. I think you want something like:

<td *ngFor="let day of days | async" 
    [ngStyle]="{ 'cursor': day.events.length > 0 ? 'pointer' : 'default' }"
    (click)="day.events.length === 0 || highlightWeek(day)">
    {{day.header}}
</td>

answered Aug 09 '17 at 11:43

Alex Florin

431
5
14

This is a clever solution! – 321X Feb 26 '21 at 11:55

score 1 · Answer 3 · answered Aug 09 '17 at 11:41

1

you can simply bind the disabled attribute on the td element as follows:

<td *ngFor="let day of days | async"
            (click)="highlightWeek(day)"
            [disabled]='day.events.length > 0? null : true'>
    {{day.header}}
</td>

answered Aug 09 '17 at 11:41

Raed Khalaf

1,997
2
13
29

score 1 · Answer 4 · answered Aug 09 '17 at 11:51

create a class to show cursor which you want when there are no events

.no-events:hover{
    cursor:  not-allowed !important;
}

then assign that class in your template

<thead>
   <tr>
       <td [class.no-evets]="day.events.length > 0" *ngFor="let day of days | async"
        (click)="highlightWeek(day)">{{day.header}}</td>
   </tr>
</thead>

with that code your function will be called on click but the cursor will be shown which you defined.

score 0 · Answer 5 · answered Nov 20 '20 at 17:21

I came across this internetzer's solution today which conditionally prevents call to the event. logically and a condition with the event like below:

<td *ngFor="let day of days | async" 
  (click)="day.events.length > 0 && highlightWeek(day)">{{day.header}}</td>

How to make click event optional in an angular 2 *ngFor loop

5 Answers5