Angular routerLink on *ngFor checkboxes-CodePudding

I have a list of checkboxes created with *ngFor. When the user select a checkbox, I display under the list another component. I've put routerLink on every checkbox basically, becase when the user clicks on a checkbox, the url should be updated with checkbox's id. The problem is that when I uncheck the checkbox, I want my checkbox's id to be remove from URL. How can I do that? I have something basic:

<span >
    <ul>
      <li *ngFor="let subtask of task.subtasks">
        <mat-checkbox [(ngModel)]="subtask.completed"
                       routerLink="{{subtask.id}}">
          {{subtask.name}}
        </mat-checkbox>
      </li>
    </ul>
  </span>

CodePudding user response：

Basically in a case subtask.id is empty, you can set routerLink value as [], so that it won't redirect anywhere.

[routerLink]="subtask.id ? [subtask.id]: ['']"