For more info please check the components's official demos & documentation demos & documentation
<mat-checkbox> provides the same functionality as a native <input type="checkbox"> enhanced with Material Design styling and animations.
Check me!
@Input() labelPosition: 'before' | 'after' Whether the label should appear after or before the checkbox. Defaults to 'after'
Check me!
Slide labels position
@Output() change: EventEmitter<MatCheckboxChange> Event emitted when the checkbox's checked value changes.
Check me!
Checked: {{ myValue }}
When user clicks on the mat-checkbox, the default behavior is toggle checked value and set indeterminate to false. This behavior can be customized by providing a new value of MAT_CHECKBOX_CLICK_ACTION to the checkbox.
Checked Indeterminate
Start End
Disabled
Result: I'm a checkbox