@talenra/components documentation
  1. Directives
  2. RadioGroupDirective

File

radio/src/radio-group/radio-group.directive.ts

Description

Wraps and controls a group of <talenra-radio-button>'s.

Reactive form

Example :
// Component class
sampleForm: FormGroup = new FormGroup({
  userChoice: new FormControl('1'),
});
Example :
<!-- Component template -->
<form [formGroup]="sampleForm">
  <talenra-radio-group formControlName="userChoice">
    <talenra-radio-button value="1" label="One" />
    <talenra-radio-button value="2" label="Two" />
    <talenra-radio-button value="3" label="Three" />
  </talenra-radio-group>
</form>

Template driven form

Example :
// Import `FormsModule` in the declaring module
import { FormsModule } from '@angular/forms';
@NgModule({
 // ...
 imports: [FormsModule],
})
Example :
// Component class
userChoice = '2';
Example :
<!-- Component template -->
<form #templateDrivenForm="ngForm">
  <talenra-radio-group name="userChoice" [(ngModel)]="userChoice">
    <talenra-radio-button value="1" label="One" />
    <talenra-radio-button value="2" label="Two" />
    <talenra-radio-button value="3" label="Three" />
  </talenra-radio-group>
</form>

Import

Example :
import { RadioGroupDirective } from '@talenra/components/radio';

../../../#/on-off-controls

Extends

ControlBaseDirective

Implements

ControlValueAccessor

Metadata

Providers ) true
Selector talenra-radio-group

Index

Inputs
Outputs
Accessors

Inputs

disabled
Type : boolean

Determinates whether the control is en-/disabled.
value
Type : any

The control's value.
formControlName
Type : string
Default value : ''

Name of the corresponding FormControl if used in a reactive form context.
readonly
Type : boolean, unknown
Default value : false, { transform: booleanAttribute }

Determines whether the control is readonly.

Outputs

valueChange
Type : RadioGroupChange

Event emitted when the user changes RadioGroup's value.

Example :
// Component class
import { RadioGroupChange } from '@talenra/components/radio';
public radioChange(change: RadioGroupChange): void {
  console.log(`RadioGroup (id: ${change.source.id}) has updated to ${change.value}.`);
}
Example :
<!-- Component template -->
<talenra-radio-group (valueChange)="radioChange($event)">...</talenra-radio-group>

Accessors

disabled
getdisabled()

Determinates whether the control is en-/disabled.
setdisabled(value: boolean)

Set whether the control is en-/disabled.

Parameters :
Name Type Optional
value boolean No
Returns : void
value
getvalue()

The control's value.
setvalue(value: any)

Set the control's value.

Parameters :
Name Type Optional
value any No
Returns : void

results matching ""

    No results matching ""