0.1.2 • Published 2 years ago
radio-selection v0.1.2
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>