@talenra/components documentation
  1. Components
  2. ToggleComponent

File

toggle/src/toggle/toggle.component.ts

Description

<talenra-toggle> is an on/off control. Think of a checkbox (which the control technically is), displayed as a toggle switch.

Reactive form

Example :
// Component class
sampleForm: FormGroup = new FormGroup({
  rememberMe: new FormControl(true),
  disabledToggle: new FormControl({ value: false, disabled: true }),
});
Example :
<!-- Component template -->
<form [formGroup]="sampleForm">
  <talenra-toggle formControlName="rememberMe" label="Remember me" />
  <talenra-toggle formControlName="disabledToggle" label="Toggle (disabled)" />
</form>

Template driven form

Example :
// Import `FormsModule` in the declaring module
import { FormsModule } from '@angular/forms';
@NgModule({
 // ...
 imports: [FormsModule],
})
Example :
// Component class
sampleValue = true;
Example :
<!-- Component template -->
<form #templateDrivenForm="ngForm">
  <talenra-toggle name="sampleValue" [(ngModel)]="sampleValue" label="Sample value" />
</form>

Formless

Example :
// Component class
sampleValue = true;
Example :
<!-- Component template -->
<talenra-toggle [(ngModel)]="sampleValue" label="Sample value" />

Import

Example :
import { ToggleComponent } from '@talenra/components/toggle';

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

Extends

OnOffControlBaseComponent

Implements

ControlValueAccessor OnInit AfterViewInit

Metadata

changeDetection ChangeDetectionStrategy.OnPush
host {
}
providers )
selector talenra-toggle
styleUrls ./toggle.component.scss
templateUrl ./toggle.component.html

Index

Inputs
Outputs

Inputs

checked
Type : boolean

Determines whether the control is checked.

Note: Typically the checked property determines the state of the control presented to the user. In case of the <talenra-checkbox>, the displayed state depends on checked and determinate state, while the latter takes precedence.
value
Type : boolean

The native element's value attribute. Setting the value will update the checked state of the control (false → unchecked/off, true → checked/on).

Note: A native checkbox element's value and checked state do not neccessarily align. However, the on-off-controls in this library (e.g. <talenra-checkbox>, <talenra-toggle>) keep the control's value and checked state in sync.
label
Type : string
Default value : ''

Label displayed to the user.
disabled
Type : boolean

Determinates whether the control is en-/disabled.
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

checkedChange
Type : EventEmitter<ToggleChange>

Event emitted when the toggle's checked value changes.

Example :
// Component class
import { ToggleChange } from '@talenra/components/toggle';
public checkedChange(change: ToggleChange): void {
  console.log(`Toggle (id: ${change.source.id}) is ${change.checked ? '' : 'not '}checked`);
}
Example :
<!-- Component template -->
<talenra-toggle
  formControlName="accept"
  label="Accept terms"
  (checkedChange)="checkedChange($event) />

results matching ""

    No results matching ""