CODEWITHSUNDEEP
nativescriptnativescript-angular
Pratik
Pratik

Reputation: 63

Radio Buttons in Nativescript

How to implement RadioButtons in Nativescript + Angular?

I have tried the RadioButton plugin but it has error during compile time. I have seen a post on stackoverflow stating to use font-awesome but it seems far more difficult to group the radio buttons.

Is it that I am ignoring any other simple method to create UI for something like this :

Label => Question: Select the fruit you like the most?

Radio 1 : Mango

Radio 2 : Apple

Radio 3 : Kiwi

Radio 4 : Banana

Any help in creating such interface?

Using Nativescript 5.0

Upvotes: 3

Views: 5336

Answers (4)

anaitslimane
anaitslimane

Reputation: 407

After trying multiple plugins (all outdated regarding todays angular and nativescript versions). I've decided to try my own solution, which is using the Button nativescript component to emulate the radiobutton behaviour. The style needs improving, but the basic behaviour is there.

Here is how it looks on Android:

To achieve this, I've created a generic component which I can use anywhere I need it.

Here is its code:

import { Component, Input } from "@angular/core";
import { RadioBtnChoice } from "./radio-btn-form-input.model";


@Component({
  selector: "radio-btn-form-input",
  templateUrl: "./radio-btn-form-input.component.html",
  styleUrls: ["./radio-btn-form-input.component.scss"]
})
export class RadioBtnFormInputComponent {

  @Input() choicesRadioBtns: RadioBtnChoice[];

  constructor() {}

  ngOnInit(): void {}

  toggleSelected(choice: RadioBtnChoice): void {
    this.choicesRadioBtns.forEach(choice => {
      choice.isSelected = !choice.isSelected;
    });
    console.log(`onTapChangeValue changed value to: ${choice.name}, ${choice.value}, ${choice.isSelected} `);
  }
}
.radio-btn {
  padding-top: 5px;
  padding-right: 20px;
  padding-bottom: 5px;
  padding-left: 20px;
  border-width: 2px;
  background-color: #ddd;
  margin: 0;
}

.radio-btn.selected {
  border-top-color: #555;
  border-left-color: #555;
  border-right-color: #CCC;
  border-bottom-color: #CCC;
  background-color: #bbbbbb;
}
<StackLayout orientation="horizontal">
  <template *ngFor="let choice of choicesRadioBtns">
              <Button text="{{choice.name}}" (tap)="toggleSelected(choice)"
                      class="radio-btn {{choice.isSelected ? ' selected' : ''}}">
              </Button>
       </template>
</StackLayout>

This is the model for the radiobuttons inputs:

export interface RadioBtnChoice {
    name: string;
    value: any;
    isSelected: boolean;
}

And this is the form using it:

export class FormUsingRadioButtonsComponent implements OnInit {

  public individual: Individual;
  public SexType = SexType;
  public sexChoicesRadioBtns: RadioBtnChoice[];

  constructor() {
    this.sexChoicesRadioBtns = [ 
      <RadioBtnChoice> {
        name: "male",
        value: SexType.M,
        isSelected: true
      },
      <RadioBtnChoice> {
        name: "female",
        value: SexType.F,
        isSelected: false
      }
    ];
  }
}
<Scrollview orientation="vertical">
    <StackLayout orientation="vertical">
        <StackLayout class="input-field">
            <Label text="sex" class="input-label"></Label>
            <radio-btn-form-input [choicesRadioBtns]="sexChoicesRadioBtns" class="input"></radio-btn-form-input> <------------- Here it is
        </StackLayout>

        <StackLayout class="input-field">
            <TextField class="input" hint="name" keyboardType="" autocorrect="false" autocapitalizationType="none">
            </TextField>
        </StackLayout>

        <StackLayout class="input-field">
            <TextField class="input" hint="surname" keyboardType="" autocorrect="false" autocapitalizationType="none">
            </TextField>
        </StackLayout>

        <Button text="Add individual" class="-primary input-field"></Button>
    </StackLayout>
</Scrollview>

Upvotes: 0

Lesauf
Lesauf

Reputation: 31

I am able to achieve it using the Switch property isUserInteractionEnabled.

btw, I use Nativescript-angular.

This will enable interaction with a Switch only if the selected value is different:

<Switch [checked]="selectedValue === 'Mango'" isUserInteractionEnabled="{{ selectedValue !== 'Mango' }}"></Switch>

Upvotes: 2

Manoj
Manoj

Reputation: 21908

Try nativescript-checkbox plugin, setting the boxType to circle will give you radio button style. For Grouped Radio Buttons, simply uncheck other radio buttons in group when one is selected.

Upvotes: 3

Pratik
Pratik

Reputation: 63

After looking around and observing several popular ecommerce apps, I found "Dialog box with List" method suitable as common user is comfortable with it.

I have decided to follow this : https://docs.nativescript.org/angular/ui/ng-ui-widgets/dialogs

Meantime, I will be still happy to see pure radio button kind of interface for Nativescript which is good for close group apps having user base with technical background as against retail users.

Upvotes: 0

Related Questions