上一篇我們介紹了在React中使用Microsoft Graph Toolkit，本篇我們將演示在Angular中使用。
使用Angular CLI創建Web應用
Angular能幫助我們快速搭建一個應用程序，並且不只包含默認應用程序的源代碼，還包括整個開發、測試和打包的工具鏈。我們將使用Angular CLI來創建我們的應用程序。
如果從來沒有使用過Angular CLI，我們首先要安裝它。
npm install -g @angular/cli
Angular CLI的命令以ng開頭，我們使用如下命令創建應用程序，記得先在命令行跳轉到指定的目錄。
ng new mgtdemo
選項可以選擇No，SCSS。
創建完之後可以用VS Code打開項目。如果要在本地編譯和調試我們的項目，可以運行命令ng serve，它會在一個本地地址承載我們的應用程序。
添加Microsoft Graph Toolkit
下面我們就對默認創建的應用程序進行修改，引入Microsoft Graph Toolkit。
首先我們要允許Angular使用web組件，打開app.module.ts文件，添加CUSTOM_ELEMENTS_SCHEMA，以便TypeScript能夠識別Web組件中的非標準HTML元素名稱。
接下來，我們需要安裝Microsoft Graph Toolkit的NPM包到我們的應用程序。
npm install @microsoft/mgt –save
最先需要添加的就是MsalProvider了，因爲它是使用其他組件功能的基礎。我們在app.component.ts文件的頭部引入Providers和MsalProvider，然後在初始化方法中使用client id初始化MsalProvider並設置爲全局Provider。
嚮導航條添加mgt-login組件
我們將創建一個Angular導航條組件，在裏面添加mgt-login組件。使用命令ng generate component NavBar創建導航條，將app組件中默認的HTML內容替換掉，只顯示NavBar組件。
然後添加mgt-login組件。
至此，界面效果如下所示。
添加mgt-agenda組件
類似的操作，我們首先通過CLI添加一個叫做AngularAgenda的組件，使用命令ng generate component AngularAgenda，然後將該組件添加到app組件的HTML模板中。
添加mgt-agenda組件到AngularAgenda的HTML模板中。
效果如下。
爲mgt-agenda實現一個自定義模板
再高級一些，我們爲mgt-agenda自定義一下模板，代碼如下。
但是在我們編譯時，會碰到錯誤，類似React，大括號會跟Angular自身衝突。
一樣滴，我們需要通過TemplateHelper去改變Mcirosoft Graph Toolkit自定義模板時用的符號。在app組件中進行設置以便全局應用。
更改後的代碼如下所示。
首先我們需要將data-props和data-if 屬性綁定到mgt-agenda事件數據。大家看下圖的代碼，我們使用了一些自定義方法如openWebLink, getTime, getDate，需要我們實現一下並讓它們在mgt-agenda組件中可用，在此我們使用#myagenda模板引用變量進行關聯。
在AngularAgenda組件的代碼中，我們使用@ViewChild屬性去實現上述的關聯，將自定義方法關聯到模板的上下文agendaElement.nativeElement.templateContext。
最後的效果如下所示。
