radio-selection

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>