Bài đăng

Đang hiển thị bài đăng từ Tháng 2, 2019

Tìm hiểm Checkbox Angular Material

Hình ảnh
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 checkb...

Tìm hiểu về Angular Material Control in action P1 - Autocomplete

Hình ảnh
Autocomplete * Autocomplete được biết là một trong các control trong forms control và là kiểu nhập văn bản bình thường và được hỗ trợ bởi một nhóm các tùy chọn được đề xuất. Tham khảo https://material.angular.io/components/autocomplete/overview và thực hiện ví dụ. Sử dụng autocomplete control vào trong các dự án rất thuận tiện có thể áp dụng cho search, filter,vvv. Đầu tiên bài đăng sử dụng  Visual code để thực hiện.   Tạo mới project với teminal phím tắt Ctrl + ~ > ng new learn-material-control Install angular material > npm install --save @angular/material @angular/cdk @angular/animations Tạo file material-modules.ts ở đường dẫn src/app/ với nội dung như sau import { A11yModule } from '@angular/cdk/a11y' ; import { DragDropModule } from '@angular/cdk/drag-drop' ; import { ScrollingModule } from '@angular/cdk/scrolling' ; import { CdkStepperModule } from '@angular/cdk/stepper' ; import { CdkTa...