how to do this option as radio button in angular-CodePudding

i need to change options to radio buttons. i have added type as radio but it is not working.

app.component.html:

 <div class="form-group">
  <div  style="display:flex; flex-direction: row;">
    <label for="role" >Select Role<span class="text-danger pl-1">*</span>
    </label><br></div>
  <!--<select formControlName="role" id="role" matNativeControl required 
    placeholder="Select Role">-->
  <select class="form-control" name="role" id="role" formControlName="role" 
    matNativeControl>
    <option value="" disabled selected>Select the role</option>
    <option type="radio" class="color" value="team_maintainer">Maintainer</option>
    <option type="radio" class="color" value="team_viewer">Viewer</option>
  </select>

</div>

Thanks in advance.

CodePudding user response：

You can add radio input as:

<label>
 <input type="radio" class="color" value="team_maintainer" formControlName="role">
   <span>Maintainer</span>
</label>
<label>
 <input type="radio" class="color" value="team_viewer" formControlName="role">
   <span>Viewer</span>
</label>

CodePudding user response：

You can use the Angular Material Radio buttons component because it makes everything easy. Just add it to your project using this command: ng add @angular/material. First import the MatRadioModule in your app.module.ts file:

import {MatRadioModule} from '@angular/material/radio';

Then add it to the imports in the @NgModule decorator:

imports: [

MatRadioModule

]

Then you can use the radio button component in your app.component.html as shown below:

<mat-radio-group aria-label="Select an option">
   <mat-radio-button value="1">Option 1</mat-radio-button>
   <mat-radio-button value="2">Option 2</mat-radio-button>
</mat-radio-group>

And that is it.