Angular Components

ClrToggle

Selector & Basic Usage

<input type="checkbox" clrToggle value="option1" name="options" />

Bindings

Binding	Type	Options	Default	Description
[(ngModel)]	two-way	model.property	0	From the Angular forms API.
[formControlName]	input	any	n/a	From the Angular forms API.
[disabled]	input	true, false	null	From the Angular forms API.
[name]	input	Valid HTML name	null	From the Angular forms API.
[validator]	input	ValidatorFn		From the Angular forms API.

ClrToggleContainer

A container component used to enable helper and error messages and works with Angular forms.

Selector & Basic Usage

<clr-toggle-container>
  <clr-toggle-wrapper>
    <input type="checkbox" clrToggle value="option1" name="options" />
    <label>Option 1</label>
  </clr-toggle-wrapper>
  <clr-toggle-wrapper>
    <input type="checkbox" clrToggle value="option2" name="options" />
    <label>Option 2</label>
  </clr-toggle-wrapper>
  <!-- clr-control-helper -->
  <!-- clr-control-error -->
</clr-toggle-container>

Bindings

Binding	Type	Options	Default	Description
[clrInline]	input	true, false	false	Place the controls inline with the ability to wrap when there is not enough space.

ClrToggleWrapper

The ClrToggleWrapper associates a specific label with the ClrToggle input.

Selector & Basic Usage

<clr-toggle-wrapper>
  <input type="checkbox" clrToggle value="option1" name="options" />
  <label>Option 1</label>
</clr-toggle-wrapper>