how to disable click event when checkbox is unchecked in angular 2

Question

I'm using a click event on ul. I'm having a checkbox below the ul when the checkbox is checked my list should be enabled and click event should work. if the checkbox is unchecked my list should be disabled, click event shouldn't work.

this is my list below:

<td mat-cell *matCellDef="let element; let i = index">
 <div fxLayout="row" fxLayoutAlign="start start" [style.backgroundColor]="i.checked ? '#D4EBFF':''">
    <div fxFlex="1">
      <h2>{{element.position}}</h2>
    </div>
    <div fxLayout="column" fxLayoutAlign="space-between start" fxFlex="94">
      <ul class="imagelist-ul" (click)="listclick()">
        <li class="imagelist-label"><strong>{{element.label}}</strong></li>
        <li class="imagelist-totalincl"><strong>Total Inclusion:</strong> {{element.total_inclusion}}</li>
        <li class="imagelist-avg"><strong>Average Probability:</strong> {{element.avg_probability}}</li>
      </ul>
    </div>
    <div fxFlex="5" class="imagelist-chkbox">
        <mat-checkbox color="primary" #i (change)="!i['checked']"></mat-checkbox>
    </div>
  </div>
</td>

can anyone please suggest me how to achieve this.

Answer 1

Add ngClass based on your checkbox condition as shown below to your ul list.

[ngClass]="{'isDisabled': !i.checked}"

Add the below class your css file. Here pointer-events: none, all pointer will be disabled.

.isDisabled {
    pointer-events: none;
    opacity: 0.5;
}

Final code may as given below:-

 <div fxLayout="row" fxLayoutAlign="start start" [style.backgroundColor]="i.checked ? '#D4EBFF':''">
    <div fxFlex="1">
      <h2>{{element.position}}</h2>
    </div>
    <div fxLayout="column" fxLayoutAlign="space-between start" fxFlex="94">
      <ul class="imagelist-ul" (click)="listclick()" [ngClass]="{'isDisabled': !i.checked}">
        <li class="imagelist-label"><strong>{{element.label}}</strong></li>
        <li class="imagelist-totalincl"><strong>Total Inclusion:</strong> {{element.total_inclusion}}</li>
        <li class="imagelist-avg"><strong>Average Probability:</strong> {{element.avg_probability}}</li>
      </ul>
    </div>
    <div fxFlex="5" class="imagelist-chkbox">
        <mat-checkbox color="primary" #i (change)="!i['checked']"></mat-checkbox>
    </div>
  </div>
</td>

And add this to css file:

.isDisabled {
    pointer-events: none;
    opacity: 0.5;
}