import { KbqToggleModule } from '@koobiq/components/toggle';A switch for turning an option on or off.
To show a validation error, put its text in a kbq-error inside the toggle bound to a form control.
@Component({ selector: 'kbq-toggle', exportAs: 'kbqToggle' })
class KbqToggleComponent extends KbqColorDirective implements CanUpdateErrorState {
readonly errorStateMatcher = input<ErrorStateMatcher>();
readonly big = input<boolean>(false);
readonly labelPosition = input<ToggleLabelPositionType>('right');
readonly ariaLabel = input<string>('', { alias: 'aria-label' });
readonly ariaLabelledby = input<string | null>(null, {
alias: 'aria-labelledby'
});
id = input<string | undefined>();
readonly name = input<string | null>(null);
readonly value = input<string | undefined>();
disabled = input<boolean | undefined>();
checked = input<boolean | undefined>();
indeterminate = model<boolean | undefined>();
readonly loading = input<boolean>(false);
clickAction = input<KbqToggleClickAction | undefined>();
readonly color = input<T | null | undefined>();
readonly change = output<KbqToggleChange>();
readonly errorState: Signal<boolean>;
readonly inputElement: Signal<ElementRef<HTMLInputElement>>;
get inputId(): string;
get colorClassName(): string;
updateErrorState(): void;
focus(): void;
getAriaChecked(): KbqCheckedState;
onChangeEvent(event: Event): void;
/** @deprecated */
onLabelTextChange(): void;
onInputClick(event: MouseEvent): void;
setDefaultColor(color: T): void;
}errorStateMatcherErrorStateMatcher An object used to control when the error state is shown.
indeterminateboolean | undefined Whether the toggle is indeterminate. This is also known as "mixed" mode and can be used to represent a checkbox with three states, e.g. a checkbox that represents a nested list of checkable items. Note that whenever checkbox is manually clicked, indeterminate is immediately set to false.
loadingboolean Property for manually set loading state.
clickActionKbqToggleClickAction | undefined Defines the behavior when a user clicks on the toggle.
colorT | null | undefined Color of the component. A value set in code holds until the input changes, and the default color is used while both are unset or falsy.
errorStateSignal<boolean> Whether the toggle is in an error state.
colorClassNamestring current class name of color
updateErrorState()void Updates the error state based on the error state matcher.
onLabelTextChange()void Does nothing: the view reads nothing from the label, so a change of it needs no re-check.
Kept for back-compatibility. Will be removed in 22.0.0.
setDefaultColor()void this color will be used as a default value. For example [color]="'' | false | undefined | null".
Change event object emitted by KbqToggleComponent.
class KbqToggleChange {
source: KbqToggleComponent;
checked: boolean;
}sourceKbqToggleComponent The source toggle of the event.
checkedboolean The new checked value of the toggle.
Toggle click action when user click on input element. Alias of KbqCheckableClickAction.
type KbqToggleClickAction = KbqCheckableClickAction;Position of the label relative to the switch.
type ToggleLabelPositionType = 'left' | 'right';