IonicToggleControlComponent
| Decorators: | @Component |
| Selectors: | |
| Implements: | FormCheckboxControl |
A wrapper component for Ionic's ion-toggle that implements FormCheckboxControl. This allows it to work with Angular's [field] directive from @angular/forms/signals.
We use FormCheckboxControl because ion-toggle is a boolean checkbox-like control. The Field directive binds to the checked model for checkbox controls.
Properties
| Name | Type | Description |
|---|---|---|
| ariaInvalid p r | Signal<boolean> | aria-invalid: true when field is invalid AND touched |
| ariaReadonly p r | Signal<true | null> | aria-readonly: true if field is readonly, null otherwise |
| ariaRequired p r | Signal<true | null> | aria-required: true if field is required, null otherwise |
| checked r implements FormCheckboxControl | ModelSignal<boolean> | The checked state - required by FormCheckboxControl |
| color r | InputSignal<string> | |
| disabled r implements FormUiControl | InputSignal<boolean> | Whether the field is disabled |
| enableOnOffLabels r | InputSignal<boolean> | |
| invalid r implements FormUiControl | InputSignal<boolean> | Whether the field is invalid (from Field directive) |
| isChecked p r | Signal<boolean> | Computed checked state - ensures proper boolean conversion for ion-toggle |
| isEffectivelyDisabled p r | Signal<boolean> | ion-toggle doesn't have a native readonly attribute. When readonly, we disable the toggle to prevent changes while maintaining the visual state. |
| justify r | InputSignal<"start" | "end" | "space-between" | undefined> | |
| labelPlacement r | InputSignal<"fixed" | "start" | "end" | "stacked"> | |
| readonly r implements FormUiControl | InputSignal<boolean> | Whether the field is readonly |
| required r implements FormUiControl | InputSignal<boolean> | Whether the field is required (from Field directive) |
| tabIndex r | InputSignal<number | undefined> | |
| touched r implements FormUiControl | ModelSignal<boolean> | Tracks whether the field has been touched - used by Field directive |
Methods
onBlur() |
|---|
Marks the field as touched when toggle loses focus |
Presentation |
Returnsvoid |
onToggleChange() | ||||||
|---|---|---|---|---|---|---|
Handle toggle change - sync ion-toggle's checked state to our checked model | ||||||
Presentation | ||||||
Parameters
Returnsvoid |