Angular CDK 是用來開發元件的工具庫，也是許多知名元件庫的核心底層；身為 Angular 開發人員，我們也許不需要使用任何現成的元件庫，但前端需求日新月異，一定會面臨到畫面互動的挑戰，Angular CDK 正是用來解決複雜互動的一帖良藥！本次分享將透過 Angular CDK 火力展示如何透過短短數行程式碼，打造出各式各樣複雜的應用功能，保證讓你愛不釋手！

2. Angular CDK
Mike 黃升煌
火力展示

3. About Me
Name
黃升煌 Mike
Title
多奇數位創意有限公司
全端工程師
Award
2018 iT 邦幫忙鐵人賽
Modern Web 組冠軍
FanPage
https://www.facebook.com/fullstackledder

4. 你是哪種工程師？

5. 懶惰 vs 勤勞

6. NG-ZORRO
Angular Material
我懶惰，我驕傲！

7. 來看看一個
客戶想要的 Dialog 吧！

8. Anguar Material 的 Dialog

9. NG-ZORRO 的 Dialog

10. PrimeNG 的 dialog

11. 但是你永遠控制不了客戶！

12. 客戶想要的 Dialog

13. 既然客戶奇耙
那就自己刻一個吧！

14. 然後你就卡住了...
如何將 dialog 顯示在畫面最上方？
如何將 dialog 定位在畫面最中間？
如何將一個 dialog 關閉
顯示 dialog 後，如何阻擋與其他 UI 互動
其他…
如何得知 dialog 內事件的變化
dialog 擋住畫面可以移動嗎？

15. 這時候，
你需要 Angular CDK

16. About Angular CDK
• Component Development Kit
• 用來實現互動行為的工具
• 專注再互動功能，不在意視覺設計
• 提供我們依照自己想要的樣式設計元件的機會

17. About Angular CDK
https://www.youtube.com/watch?v=kYDLlfpTLEA

18. DEMO

19. Resources
• 全端開發人員天梯
• Angular Taiwan
• Sample Code
• Angular CDK 文件
• Angular CDK(1) - 基礎介紹
• 線上 Angular 讀書會 – S30E11

20. THANK YOU