@talenra/components documentation
  1. Components
  2. CheckboxComponent

File

checkbox/src/checkbox/checkbox.component.ts

Description

<talenra-checkbox> is an on/off control.

Other than a native checkbox element, <talenra-checkbox> keeps value and checked properties in sync (both are either true or false).

If property indeterminate is set true, the checkbox is presented in "mixed" state, regardless of its value or checked state.

Reactive form

Example :
// Component class
sampleForm: FormGroup = new FormGroup({
  rememberMe: new FormControl(true),
  disabledCheckbox: new FormControl({ value: false, disabled: true }),
});
Example :
<!-- Component template -->
<form [formGroup]="sampleForm">
  <talenra-checkbox formControlName="rememberMe" label="Remember me" />
  <talenra-checkbox formControlName="disabledCheckbox" 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-checkbox name="sampleValue" [(ngModel)]="sampleValue" label="Sample value" />
</form>

Formless

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

Import

Example :
import { CheckboxComponent } from '@talenra/components/checkbox';

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

Extends

OnOffControlBaseComponent

Implements

ControlValueAccessor OnInit AfterViewInit

Metadata

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

Index

Inputs
Outputs
Accessors

Inputs

indeterminate
Type : boolean

The control's indeterminate state.

"Indeterminate" means it is not possible to say whether the control is checked or unchecked. Check the MDN docs for more information and a use-case.

The checkbox is presented in "mixed" state while indeterminate is true, regardless of its checked state or value.

Example :
<talenra-checkbox formControlName="selectAll" label="Select all" indeterminate />
<talenra-checkbox formControlName="selectAll" label="Select all" [indeterminate]="myCondition" />

See MDN: Indeterminate state checkboxes
pointerDisabled
Type : boolean
Default value : false

Disables handling of click events while the visual appearance of Checkbox is not modified (other than disable would). Disabling pointer events is useful when the checkbox is used as a state indicator only and logic is handled elsewhere.

Example :
<talenra-checkbox pointerDisabled [ngModel]="checkboxValue" (click)="handleCheckboxClick()" />
labelPosition
Type : TCheckboxLabelPosition
Default value : CheckboxLabelPosition.After

Determines whether the label is displayed before or after the checkbox.

Example :
<talenra-checkbox formControlName="selectAll" label="Select all" labelPosition="before" />
size
Type : TCheckboxSize
Default value : CheckboxSize.M

Determines the size of the rendered checkbox.

Example :
<talenra-checkbox formControlName="username" label="Username" size="s" />
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<CheckboxChange>

Event emitted when the checkbox's checked value changes.

Example :
// Component class
import { CheckboxChange } from '@talenra/components/checkbox';
checkboxChange: (change: CheckboxChange) => {
  console.log(`Checkbox (id: ${change.source.id}) is ${change.checked ? '' : 'not '}checked`);
}
Example :
<!-- Component template -->
<talenra-checkbox formControlName="selectAll" label="Select all" checked (checkedChange)="checkboxChange($event) />
indeterminateChange
Type : EventEmitter

Event emitted when the checkbox's indeterminate value changes.

Example :
// Component class
indeterminateChange(indeterminate: boolean): void => {
  console.log(`Checkbox is ${indeterminate ? '' : 'not '}indeterminate`);
}
Example :
<!-- Component template -->
<talenra-checkbox
  formControlName="selectAll"
  label="Select all"
  indeterminate
  (indeterminateChange)="indeterminateChange($event)" />

Accessors

indeterminate
getindeterminate()

The control's indeterminate state.

"Indeterminate" means it is not possible to say whether the control is checked or unchecked. Check the MDN docs for more information and a use-case.

The checkbox is presented in "mixed" state while indeterminate is true, regardless of its checked state or value.

Example :
<talenra-checkbox formControlName="selectAll" label="Select all" indeterminate />
<talenra-checkbox formControlName="selectAll" label="Select all" [indeterminate]="myCondition" />

See MDN: Indeterminate state checkboxes
setindeterminate(value: boolean)

Set the control's indeterminate state.

Parameters :
Name Type Optional
value boolean No
Returns : void

results matching ""

    No results matching ""