TIP - THE COMPONENT DEV KIT ( CDK )❤️✅

( Là tập hợp các hành vi cơ bản để xây dựng các TP UI người dùng )

Accessibility - cdk

+ a11y gói cung cấp 1 số trong cụ để cải thiện khả năng tiếp cận

Lệnh focus cho input hoặc thành phần div

(1)cdkTrapFocus [cdkTrapFocusAutoCapture]="true"

—> Bên trong thành phần dùng thêm cdkFocusInitial để tráp nó vô phần tử.

Còn riêng thì dùng (1)

—————————————————————————————————————

Accordion - cdk

Dùng cách sổ xuống 1 template tì dùng CDK accordion

-> Cách đơn giản thì dùng *ngIf tạm được

—————————————————————————————————————

ClipBoard - cdk

⁠

https://stackblitz.com/edit/ng-template-outlet-example-nt8fas?file=src%2Fapp%2Fapp.component.html⁠

⁠

—————————————————————————————————————

Portal + Overlay - cdk

BT: Cách để show lên 1 template như là …click input account -> sổ list các accounts

-> xử lý case khi click outsite thì đóng lại

Dùng Portal:

https://material.angular.io/cdk/portal/overview⁠

⁠

https://stackblitz.com/edit/angular-cdk-portal-simple-example-x5wgjz⁠

⁠

-> Cách dùng (overlay + portal) cũng xử lý đk case scroll (table + option dropdown ) *

⁠

https://stackblitz.com/edit/angular-custom-dropdown-cdk-pxqvge?file=src%2Fapp%2Fcustom-dropdown%2Fcustom-select.html⁠

⁠

—————————————————————————————————————

Coercion - cdk

+ Ép kiểu (rõ ràng và ngầm)

+ Chức năng tiện ích cho @Inputs thành dạng cụ thể

+ EX: @Input() set someFlag(val: any) {

this._someFlag = coerceBooleanProperty(val);

}

——> <child [someFlag]="'hghg'"></child>

—————————————————————————————————————

Overlay Cdk

~ Lưu ý khi dùng với “withPositions”

originX & originY: Là những vị trí cạnh của buttom

overlayX & overlayY: Là những vị trí cạnh của template overlay

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.