The Toggles

Checkbox

  
    Checkbox
  
  {{checkbox1}}
  ]]>

  
    Checkbox
  
  {{checkbox2}}
    ]]>

The mdl-checkbox is ngModel compliant. You can provide the mdl-ripple directive to create a ripple effect.

Radios

  Value 1
  Value 2
  Value 3 (disabled)

  {{radioOption}}
  ]]>

The mdl-radio component is ngModel compliant. The name attribute is used to group radios together. You need to provide a name or a formControlName. If you provide both they must be the same. All radiobutton groups must have a unique name. The value is used to set the ngModel value if the option is selected. You can provide the mdl-ripple directive to create a ripple effect.

Icon Toggle

  format_bold
  {{checkbox1}}
  format_italic
  {{checkbox2}}
  format_italic
  (disabled) {{checkbox2}}
  ]]>

The mdl-icon-toggle is much like a mdl-checkbox componnet. The only difference: an colored icon is used to cover the state of the checkbox.

Switch

  Option 1
  {{checkbox1}}
  Option 2
  {{checkbox2}}
  Option 3 (disabled)
  {{checkbox2}}
  ]]>

The mdl-switch is much like an mdl-checkbox componnet. The only difference: an toggle ui is used to cover the state of the checkbox.