在前一篇文章中我們介紹「如何透過 Angular Material Component Harness」來測試 Angular Material 的相關元件，省去許多自己使用 querySelector 的方式找到元件的麻煩，也可以避免未來元件改版破壞結構的麻煩，今天我們來看看如何替我們自己寫好的元件也設計對應的 Component Harnss，讓未來使用元件的人也能寫出更強健的測試程式碼！

Angular CDK 9 推出了新的 Component Harness 功能，方便我們更容易寫出強健、好閱讀的整合測試或 E2E 測試程式碼，而幾乎所有 Angular Material 元件也都有實作對應的 ComponentHarness，大幅節省開發人員在撰寫測試程式來測試元件所需要花費的力氣！到底 Component Harness 是什麼？又要如何幫助我們寫著更強健的測試呢？今天就來一窺究竟！

今天我們來講兩個Angular CDK文件上沒有介紹，但很有機會使用到的隱藏版功能，分別是型別轉換(coercion)、平台偵測(platform)。

今天我們要來介紹Angular CDK中的Overlay！Overlay在Angular Material中可以說是隨處可見，只要是任何會從螢幕上彈出資訊的功能，如Select、Dialog等等都免不了要使用Overlay；因此也能說Overlay是Angular Material中讓畫面更具有立體感的大功臣，到底這個功能能幫助我們達到多少目標呢？就讓我們繼續看下去吧！

接下來我們要介紹Angular CDK中的Portal分類，透過這裡面的功能，我們可以很容易的動態切換各種不同的元件和templates，讓動態產生內容不再是件麻煩的事情！

其實在Angular中，我們已經能夠使用<ng-container>搭配ngTemplateOutlet或ngComponentOutlet來切換不同的template或component了，而Angular CDK的Portal可以想像成是它的簡單好用加強版！甚至我們可以透過Portals裡面的功能，把元件放在整個Angular程式的控制範圍之外，但元件依然還在Angular的控制內，非常的強大！

就讓我們繼續往下看吧！！

今天我們要介紹兩個比較簡單的Angular CDK功能分類，分別是Observables和Scroll。這兩個功能使用上非常簡單，但乍看之下使用的機會不高，因此我們也會來稍微偷看一下Angular Material的原始碼，看看有什麼樣讓人意想不到的使用情境！

今天我們來講Angular CDK中兩個跟版面配置有關的功能，分別是Bidirectionality、Layout。

Bidirectionality主要是用來調整LTR(Left To Right)跟RTL(Right To Left)配置及偵測的工具。

而Layout則是用來偵測瀏覽器可用的寬度與高度，來判斷目前網站使用在什麼樣的平台上，如果不使用任何其他的RWD工具，Layout可是Angular CDK中實現RWD不可或缺的幫手哩！

今天我們要來介紹第一個Angular CDK的分類功能－Accessibility。Accessibility(簡稱A11y)主要是放置一些方便與使用者互動的功能，以及讓我們在使用螢幕閱讀器時更加方便的工具。我們將介紹裡面幾個有趣的功能！

我們即將要邁入新的篇章－Angular CDK，我們今天先不來寫程式，而是大致的把目前(5.0.0)Angular CDK的架構做一個整體的介紹，讓讀者們能先在心中有個藍圖，在未來學習Angular CDK應該會更有感覺！