angular material two check boxes, only one can be checked at a time

I am very new to Angular-material so this question might sound a bit silly, but please bear with me.

I have two checkboxes as following.

<mat-checkbox>Apply for Job</mat-checkbox>
<mat-checkbox>Modify a Job</mat-checkbox>

Let’s say a user checked the first checkbox (“Apply for a Job”) then later on clicks on “Modify Job” checkbox, I want the application to automatically uncheck the first one. How can I achieve this without using radio-buttons?

Answer

You can put a condition on checked attribute, as in this example:

Typescript:

selected=-1;

HTML

<div *ngFor="let item of [1,2,3];  let i = index">
  <mat-checkbox [checked]="selected === i" (change)="selected = i">Check me!</mat-checkbox>
</div>

DEMO

Advertisement

Answer