Tìm hiểm Checkbox Angular Material

Mat - Checkbox

<mat-checkbox> cung cấp chức năng như checkbox thuần html <input type="checkbox"> được cải tiến với Material Design styling và animations.

Label checkbox

Label checkbox được cung cấp dưới dạng nội dung cho phần tử <mat-checkbox>. Label có thể được cấu hình ở trước hoặc sau checkbox bằng cách đặt thuộc tính labelPosition thành 'before' hoặc ‘after’.

Nếu bạn không muốn label xuất hiện bên cạnh checkbox, bạn có thể sử dụng ‘aria-label’ hoặc ‘aria-labelledby’ để chỉ định label phù hợp.

Use with @angular/forms

<mat-checkbox> tương thích với @angular/forms và hỗ trở cả FormsModule lẫn ReactiveFormsModule.

Indeterminate state

<mat-checkbox> hỗ trợ trạng thái không xác định (indeterminate), giống với thẻ html thuần <input type="checkbox">. Khi mà trạng thái indeterminate của checkbox là true, nó sẽ thể hiện trạng thái không xác định bất kể giá trị đang là checked. Các tương tác với checkbox từ người dùng (ví dụ: click) sẽ xóa bỏ trạng thái không xác định.

Click action config

Khi người dùng click vào mat-checkbox, mặc định là chuyển đổi giữa giá trị checked của checkbox và đông thời gán trạng thái indeterminate thành false. Những hành động này sẽ được tùy chỉnh bởi  MAT_CHECKBOX_CLICK_ACTION tới checkbox.

providers: [

  {provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'check'}

]

Những giá trị được define là:

 noop

Không thay đổi giá trị checked hoặc indeterminate. Developer có thể thực hiện tùy chỉnh với hành động click.

 check

Chuyển đổi trạng thái checked của checkbox, bỏ qua giá trị indeterminate. Nếu checkbox đang trong trạng thái indeterminate, checkbox sẽ hiển thị như một indeterminate checkbox không quan tâm tới giá trị checked.

 check-indeterminate

Hành động mặc định của mat-checkbox. Sẽ luôn gán indeterminate thành false khi người dùng click vào mat-checkbox. Nó tương ứng với hành động của thẻ checkbox thuần <input type=”checkbox”>.

Theming

Về màu sắc của một <mat-checkbox> có thể được thay đổi bởi thuộc tính color . Mặc định, các checkbox sẽ sử dụng accent color. Nó có thể chuyển thành 'primary' hoặc 'warn'.

Example 
Trước khi code phần này bạn cần xem lại phần trước để có được môi trường.
> ng g c mat-checkbox

* Thay thế code ở file mat-checkbox.component.html

<mat-card>

<mat-card-content>

<h2 class="example-h2">Checkbox configuration</h2>

<section class="example-section">

<mat-checkbox class="example-margin"
[(ngModel)]="checked">Checked</mat-checkbox>

<mat-checkbox class="example-margin"
[(ngModel)]="indeterminate">Indeterminate</mat-checkbox>

</section>

<section class="example-section">

<label class="example-margin">Align:</label>

<mat-radio-group [(ngModel)]="labelPosition">

<mat-radio-button class="example-margin" value="after">After</mat-radio-button>

<mat-radio-button class="example-margin" value="before">Before</mat-radio-button>

</mat-radio-group>

</section>

<section class="example-section">

<mat-checkbox class="example-margin" [(ngModel)]="disabled">Disabled</mat-checkbox>

</section>

</mat-card-content>

</mat-card>

<mat-card class="result">

<mat-card-content>

<h2 class="example-h2">Result</h2>

<section class="example-section">

<mat-checkbox

class="example-margin"

[(ngModel)]="checked"

[(indeterminate)]="indeterminate"

[labelPosition]="labelPosition"

[disabled]="disabled">

I'm a checkbox

</mat-checkbox>

</section>

</mat-card-content>

</mat-card>

* Thay thế code ở file mat-checkbox.component.ts

import { Component, OnInit } from '@angular/core';

@Component({

selector: 'app-mat-checkbox',

templateUrl: './mat-checkbox.component.html',

styleUrls: ['./mat-checkbox.component.css']

})

export class MatCheckboxComponent implements OnInit {

checked = false;

indeterminate = false;

labelPosition = 'after';

disabled = false;

constructor() { }

ngOnInit() {

}

}

* Thay thế code ở file mat-checkbox.component.css

.example-h2 {

margin: 10px;

}

.example-section {

display: flex;

align-content: center;

align-items: center;

height: 60px;

}

.example-margin {

margin: 0 10px;

}

>ng s(erve)
Kết quả thử nghiệm

Nguồn: https://material.angular.io/components/checkbox/overview