Radio Selection

Angular component using Radio buttons to allow for Single and Multiple selections. The radio button is in a Button to give a toggle type selections. Text and Radio are align to the left.

You can use a formControl to pass the defaults and to get the selected

Installation

npm install radio-selection

Scaffolding

Import the module into your project under imports

imports: [
    BrowserModule,
    AppRoutingModule,
    RadioSelectionModule
  ],

Selector Usage

This is the basic selector with data

<wav-radio-selection [data]="sections"></wav-radio-selection>

Data strcuture for radio selection

sections = [
  { name: "step 01", title: 'Choose Model', disabled: false, id:1 },
  { name: "step 02", title: 'Basic Details', disabled: false, id: 2 },
  { name: "step 03", title: 'Topics', disabled: true, id: 3 },
]

The disabled property if present in the data will disable the radio selection

Inputs

The following Inputs are available

| Input | Type | Defaut | Description | | ----- | ---- | ------ | ----------- | | data | ARRAY (string[] any[]) | [] | data for radio buttons | | key | STRING | '' | value to emit on changes | | value | STRING | '' | label for display for radio | | multi | BOOLEAN | false | multiselection | | layout | STRING | 'row' | ROW or COLUMN layout |

Outputs

| Event | Type | Description | | ---------- | ------ | ----------- | | change | STRING | all radio selections as string - comma delimited based on key input |

FormControl

formControlName="radioSelection"

<wav-radio-selection formControlName="radioSelection"></wav-radio-selection>

radioSelection = this.fb.control('1,2,3')

Example of input properties for an Object array of items

sections = [
  { name: "step 01", title: 'Choose Model', disabled: false, id:1 },
  { name: "step 02", title: 'Basic Details', disabled: false, id: 2 },
  { name: "step 03", title: 'Topics', disabled: true, id: 3 },
]

<wav-radio-selection
  [data]="sections"
  key="name"
  value="title"
  [multi]="true"
  [formControl]="radioGroup"
  layout="row"
></wav-radio-selection>

Example of the input properties for an Array of items

sections = ['Choose Model', 'Basic Details', 'Topics']

<wav-radio-selection
  [data]="sections"
  [multi]="true"
  [formControl]="radioGroup"
  layout="row"
></wav-radio-selection>