Menu
I was expecting a in-built directive or a tag for this but probably not according to their documentation.
This is the example.
<div class="radioButtondemoBasicUsage" ng-app="MyApp"> <form ng-submit="submit()" ng-controller="AppCtrl"> <p>Selected Value: <span class="radioValue">{{ data.group1 }}</span> </p> <md-radio-group ng-model="data.group1"> <md-radio-button value="Apple" class="md-primary">Apple</md-radio-button> <md-radio-button value="Banana"> Banana </md-radio-button> <md-radio-button value="Mango">Mango</md-radio-button> </md-radio-group>
268
Angular Radio Button The <mat-radio-button> provides the same functionality as a native <input type=”radio”> enhanced with Material Design styling and animations. In the radio button, the user can only select one value at a time; that is why radio-buttons with the same name comprise a set from which the only one may be selected at one time.
To get input radio elements to horizontally align in React Material UI, we can add the row prop to the RadioGroup component.
The radio group has the value property that reflects the currently selected radio button inside of the group. Individual radio buttons inside of the radio group will inherit the name of the group. The <mat-radio-group> is compatible with @angular/forms and supports both FormsModule and ReactiveFormsModule.
Components such as autocomplete, date picker, slider, menus, grids, toolbars, and radio buttons are generally used using Angular Material. A radio button is a simple input element with a type property set to radio.
You do not need to override any default CSS:
<md-radio-group layout="row"> <md-radio-button value=0 class="md-primary">On</md-radio-button> <md-radio-button value=1> Off </md-radio-button> </md-radio-group> 
Just put in md-radio-group tag a layout="row" attribute.
88
Better not override any existing class.
Use the directive ng-style and give value for display parameter.
<md-radio-group ng-model="selvalue"> <md-radio-button value="A" class="md-primary" ng-style="{'display':'inline'}"> Apple</md-radio-button> <md-radio-button value="R" class="md-primary" ng-style="{'display':'inline'}"> Orange </md-radio-button> </md-radio-group> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
