Anil Singh | Code-sample.com

A radio-button is an element that allows the user to choose only one option from a set. The below example is used to choose only one option from a gender set using Angular 5 Materia l . radiobutton.ts - import { Component } from '@angular/core' ; @ Component ({   selector : 'radiobutton' ,   templateUrl : 'radiobutton.html' }) export class Radiobutton { //Todo – Radio button } And radiobutton.html – < mat-card >   < mat-card-content >     < h2 > Pick Your Gender </ h2 >     < section >       < mat-radio-group [( ngModel )] = "Gender" >         < mat-radio-button value = "Male" > Male </ mat-radio-button >         < mat-radio-button value = "Female" > Female </ mat-radio-button >       </ mat-radio-group ...

The checkboxes allow you to select multiple options from a set.   The below example is used to select the multiple Angular versions as per your requirement. The example for  Check-box controls  as following – checkbox.ts - import { Component } from '@angular/core' ; @ Component ({   selector : 'checkbox' ,   templateUrl : 'checkbox.html' }) export class Checkbox { //Todo - checkbox } And checkbox.html – < mat-card >   < mat-card-content >     < h2 > Choose Your Angular Version </ h2 >     < section >       < mat-checkbox   [( ngModel )] = "Angular2" > Angular 2 </ mat-checkbox >       < mat-checkbox   [( ngModel )] = "Angular4" > Angular 4 </ mat-checkbox >       < mat-checkbox   [( ngModel )] = "Angular5" > Angular 5 </ mat-che...