Create checkboxes like radio buttons Angular

Question

I want to create check boxes which behave like radio buttons. the first one should be true when program executes in first time. This is what I have tried so far. https://stackblitz.com/edit/angular-reactive-form-checkbox-radio-bveatn?file=src%2Fapp%2Fapp.component.html Any help is much appreciated.

Answer 1

So under behavior of radio buttons you mean only one checkbox can be selected at a time?

We could, for example, add checked when input.value === selectedValue

<input type="checkbox" value="Product" #product
[checked]="product.value === selectedValue"
(change)="onItemChange($event.target.value)" />Product

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
 
  selectedValue = 'Product'


  onItemChange(selectedValue: string) {
    this.selectedValue = selectedValue;
    console.log(" Value is : ", selectedValue);
    return this.selectedValue;
  }
}

Keep in mind that values for selectedValue and name references need to be unique.

Working example: https://stackblitz.com/edit/angular-reactive-form-checkbox-radio-e3n8yz?file=src%2Fapp%2Fapp.component.ts