Angular Mobile radio buttons

Angular Mobile Radio Button - Bootstrap 4 & Material Design

The Angular Mobile Radio button is a component used to allow a user to make a single choice among many options, while Checkboxes are for selecting multiple options.


Basic example

Add checked input to checkbox component to change its checked state

Android
Android radio
iOS
iOS radio

          <StackLayout>
            <StackLayout
              orientation="horizontal"
              verticalAlignment="center"
              *ngFor="let option of radioOptions"
            >
              <CheckBox
                #elem
                [checked]="option.selected"
                (checkedChange)="
                  elem.checked !== option.selected && changeCheckedRadio(option)
                "
                class="checkbox"
                boxType="circle"
              ></CheckBox>
              <StackLayout verticalAlignment="center">
                <Label
                  [text]="option.text"
                  textWrap="true"
                  (tap)="changeCheckedRadio(option)"
                ></Label>
              </StackLayout>
            </StackLayout>
          </StackLayout>
        

import { Component } from '@angular/core';

@Component({
  selector: 'app-radio',
  moduleId: module.id,
  templateUrl: './radio.component.html',
})

export class RadioComponent {
  radioOptions: any[] = [
    { text: 'Radio Option 1', selected: false },
    { text: 'Radio Option 2', selected: false },
    { text: 'Radio Option 3', selected: false }
  ]

  changeCheckedRadio(radioOption: any): void {
    radioOption.selected = !radioOption.selected;

    if (!radioOption.selected) {
      return;
    }

    // uncheck all other options
    this.radioOptions.forEach(option => {
      if (option.text !== radioOption.text) {
        option.selected = false;
      }
    });
  }
}
        

Disabled state

Use isEnabled input to change disabled state of the radio button.


          <StackLayout>
            <StackLayout
              orientation="horizontal"
              verticalAlignment="center"
              *ngFor="let option of radioOptions"
            >
              <CheckBox
                #elem
                [checked]="option.selected"
                (checkedChange)="
                  elem.checked !== option.selected && changeCheckedRadio(option)
                "
                class="checkbox"
                boxType="circle"
              ></CheckBox>
              <StackLayout verticalAlignment="center">
                <Label
                  [text]="option.text"
                  textWrap="true"
                  (tap)="changeCheckedRadio(option)"
                ></Label>
              </StackLayout>
            </StackLayout>
          </StackLayout>
        

import { Component } from '@angular/core';

@Component({
  selector: 'app-radio',
  moduleId: module.id,
  templateUrl: './radio.component.html',
})

export class RadioComponent {
  radioOptions: any[] = [
    { text: 'Radio Option 1', selected: false },
    { text: 'Radio Option 2', selected: false },
    { text: 'Radio Option 3', selected: false }
  ]

  changeCheckedRadio(radioOption: any): void {
    radioOption.selected = !radioOption.selected;

    if (!radioOption.selected) {
      return;
    }

    // uncheck all other options
    this.radioOptions.forEach(option => {
      if (option.text !== radioOption.text) {
        option.selected = false;
      }
    });
  }
}
        

Angular Mobile Checkbox - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of checkbox component.


Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.


    // MDB Angular Mobile Free
    import { MdbCheckboxModule } from 'mdb-angular-mobile'
    

Components

MdbCheckbox

Selector: MDBCheckbox

Type: MdbCheckboxComponent


Inputs

Name Type Default Description Example
checked boolean false Specifies the checked state of the checkbox checked="true"
isEnabled boolean true Specifies the disabled state of the checkbox [isEnabled]="false"

Outputs

Name Type Description Example
checkedChange Checkbox native view Event fired on checkbox checked state change (checkedChange)="onChange($event)"

Methods

You can get access to checkbox methods from another component.

Name Description
toggle Toggles the checked state of the checkbox