{"id":4990,"date":"2020-07-06T12:44:03","date_gmt":"2020-07-06T19:44:03","guid":{"rendered":"https:\/\/officedevblogs.wpengine.com\/?p=4990"},"modified":"2020-07-06T12:44:03","modified_gmt":"2020-07-06T19:44:03","slug":"a-lap-around-microsoft-graph-toolkit-day-14-using-microsoft-graph-toolkit-with-angular","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/a-lap-around-microsoft-graph-toolkit-day-14-using-microsoft-graph-toolkit-with-angular\/","title":{"rendered":"A Lap around Microsoft Graph Toolkit Day 14 \u2013 Using Microsoft Graph Toolkit with Angular"},"content":{"rendered":"

Author:\u00a0Cameron Dwyer<\/strong>,\u00a0<\/span>Microsoft\u00a0<\/span>Office Development MVP<\/span>\u00a0<\/span><\/p>\n

c<\/span>amerondwyer.com<\/span><\/a>\u00a0|\u00a0<\/span>@camerondwyer<\/span><\/a>\u00a0|\u00a0<\/span>LinkedIn<\/span><\/a>\u00a0<\/span><\/p>\n

Introduction<\/span>\u00a0<\/span><\/h3>\n

Welcome to Day 1<\/span>4<\/span>\u00a0of the\u00a0<\/span>Microsoft Graph Toolkit blog series!<\/span><\/a>\u00a0<\/span><\/p>\n

In the series so\u00a0<\/span>far,<\/span>\u00a0we have\u00a0<\/span>exercised<\/span>\u00a0<\/span>the Microsoft Graph Toolkit\u00a0<\/span>capabilities\u00a0<\/span>using<\/span>\u00a0plain<\/span>\u00a0JavaScript\/HTML\/CSS<\/span>\u00a0which<\/span>\u00a0has shown\u00a0<\/span>that we are not<\/span>\u00a0<\/span>dependent upon<\/span>\u00a0any\u00a0<\/span>specific\u00a0<\/span>JavaScript framework<\/span>.\u00a0<\/span>In\u00a0<\/span>a\u00a0<\/span>real-world<\/span>\u00a0application however<\/span>,<\/span>\u00a0you\u00a0<\/span>may<\/span>\u00a0<\/span>be<\/span>\u00a0us<\/span>ing<\/span>\u00a0<\/span>a full<\/span>–<\/span>feature<\/span>d<\/span>\u00a0JavaScript framework such as React or Angular.\u00a0<\/span>In the previous article\u00a0<\/span>Fabio Franzini<\/span><\/a>\u00a0took us through\u00a0<\/span>using the Microsoft Graph Toolkit in a React<\/span>\u00a0<\/span>application<\/span>.\u00a0<\/span>Today\u00a0<\/span>I\u2019m going to take you through constructing the same\u00a0<\/span>example using\u00a0<\/span>Angular<\/span><\/a>.<\/span>\u00a0<\/span>\u00a0<\/span><\/p>\n

Creating a\u00a0<\/span>w<\/span>eb\u00a0<\/span>a<\/span>pp\u00a0<\/span>using the<\/span>\u00a0Angular<\/span>\u00a0CLI<\/span>\u00a0<\/span><\/h3>\n

One of the great benefits of using a JavaScript framework like Angular is that you can scaffold<\/span>\u00a0a new application very quickly<\/span>. This scaffolding includes not only the\u00a0<\/span>source\u00a0<\/span>code\u00a0<\/span>for a default app, but also an entire\u00a0<\/span>development, testing, and packaging\u00a0<\/span>toolchain<\/span>.<\/span>\u00a0<\/span>W<\/span>e make use of the\u00a0<\/span>Angular CLI<\/span><\/a>\u00a0<\/span>to scaffold up our new application. If\u00a0<\/span>you have<\/span>\u00a0never used the Angular CLI before\u00a0<\/span>you can install it by executing the following command.<\/span>\u00a0<\/span><\/p>\n

npm\u00a0install -g @angular\/cli<\/span><\/b>\u00a0<\/span><\/p>\n

Angular CLI command<\/span>s<\/span>\u00a0begin with\u00a0<\/span>ng<\/span><\/b>,\u00a0<\/span>and\u00a0<\/span>we can create\u00a0<\/span>a new application with the command<\/span>\u00a0<\/span><\/p>\n

ng new demo-mgt-angular<\/span><\/b>\u00a0<\/span><\/p>\n

\"Creating<\/p>\n

Opening the resulting folder in\u00a0<\/span>VS<\/span>\u00a0Code will reveal the default Angular project<\/span>. The README.MD file provides instructions on how to\u00a0<\/span>work with this default project.<\/span>\u00a0<\/span>To build and\u00a0<\/span>debug<\/span>\u00a0our new app locally<\/span>,<\/span>\u00a0<\/span>we\u00a0<\/span>can\u00a0<\/span>use the following command<\/span>\u00a0<\/span><\/p>\n

n<\/span><\/b>g\u00a0<\/span><\/b>serve<\/span><\/b>\u00a0<\/span><\/p>\n

This will<\/span>\u00a0host<\/span>\u00a0the app\u00a0<\/span>on a local dev server at\u00a0<\/span>http:\/\/localhost:4200<\/span><\/a>, when opened in a browser we are presented\u00a0<\/span>with the default Angular CLI\u00a0<\/span>app.<\/span>\u00a0<\/span><\/p>\n

\"Default<\/p>\n

Adding<\/span>\u00a0the Microsoft Graph Toolkit<\/span>\u00a0<\/span><\/h3>\n

Time to make some changes to this default app and bring in the Microsoft Graph Toolkit.\u00a0<\/span>First,<\/span>\u00a0we need to allow Angular to use<\/span>\u00a0w<\/span>eb\u00a0<\/span>c<\/span>omponents by adding the\u00a0<\/span>CUSTOM_ELEMENTS_SCHEMA<\/span><\/b>\u00a0to the\u00a0<\/span>app module<\/span><\/b>.<\/span>\u00a0This is because the element names\u00a0<\/span>used by the web component<\/span>s<\/span>\u00a0are not the standard HTML element names and TypeScript\u00a0<\/span>will not<\/span>\u00a0be able to validate them.<\/span>\u00a0<\/span><\/p>\n

\"Add<\/p>\n

Next,<\/span>\u00a0we need to get the Microsoft Graph Toolkit NPM package and add it to our app<\/span>.<\/span>\u00a0<\/span><\/p>\n

npm\u00a0install @microsoft\/mgt<\/span><\/b>\u00a0–save<\/span><\/b>\u00a0<\/span><\/p>\n

The first component we will add is the\u00a0<\/span>MsalProvider<\/span><\/b>\u00a0since it is fundamental to\u00a0<\/span>enable<\/span>\u00a0the other\u00a0<\/span>toolkit\u00a0<\/span>components<\/span>\u00a0to function<\/span>. We import\u00a0<\/span>Providers<\/span><\/b>\u00a0and\u00a0<\/span>MsalProv<\/span><\/b>ider<\/span><\/b>, then\u00a0<\/span>when our app\u00a0<\/span>initializes<\/span>\u00a0<\/span>set the\u00a0<\/span>MsalProvider<\/span>\u00a0in code<\/span>, using the client id\u00a0<\/span>of our\u00a0<\/span>Azure App\u00a0<\/span>Registration<\/span>\u00a0(<\/span>creation of App Registration is covered in Day 2 of this series<\/span><\/a>)<\/span>.<\/span>\u00a0<\/span><\/p>\n

\"Add<\/p>\n

Adding the<\/span>\u00a0<\/span>mgt-l<\/span>ogin\u00a0<\/span>c<\/span>omponent<\/span>\u00a0to the navigation bar<\/span>\u00a0<\/span><\/h3>\n

Let\u2019s<\/span>\u00a0<\/span>create\u00a0<\/span>the<\/span>\u00a0<\/span>Angular\u00a0<\/span>NavBar\u00a0component that will sit along the top of our app and contain the\u00a0<\/span>mgt-login<\/span>\u00a0component<\/span>.<\/span>\u00a0<\/span>W<\/span>e can create the\u00a0NavBar\u00a0component using the Angular CLI<\/span>\u00a0<\/span><\/p>\n

ng\u00a0generate\u00a0component\u00a0NavBar<\/span><\/b>\u00a0<\/span><\/p>\n

Replace<\/span>\u00a0the<\/span>\u00a0default app component\u00a0<\/span>HTML<\/span>\u00a0template\u00a0<\/span>to<\/span>\u00a0<\/span>just<\/span>\u00a0show the\u00a0NavBar\u00a0component<\/span>\u00a0<\/span><\/p>\n

\"Replace<\/p>\n

Now we can simply add the mgt-login\u00a0<\/span><\/span>web\u00a0<\/span><\/span>component to the\u00a0<\/span>NavBar<\/span>\u00a0<\/span><\/span>HTML\u00a0<\/span><\/span>template<\/span><\/span>.<\/span><\/span>\u00a0<\/span><\/p>\n

\"Add<\/p>\n

At this stage we have successfully integrated the Graph Toolkit into our Angular app and the\u00a0<\/span><\/span>mgt-<\/span><\/span>login component is fully functional<\/span><\/span>.<\/span><\/span>\u00a0<\/span><\/p>\n

\"Web<\/p>\n

Adding\u00a0<\/span>the\u00a0<\/span>mgt-a<\/span>genda\u00a0<\/span>c<\/span>o<\/span>mponent<\/span>\u00a0<\/span><\/h3>\n

Now let\u2019s create a new Angular component called\u00a0AngularAgenda\u00a0<\/span>using the CLI<\/span>\u00a0<\/span>and bring the mgt-agenda component into it.\u00a0<\/span>\u00a0<\/span><\/p>\n

ng\u00a0generate\u00a0component\u00a0AngularAgenda<\/span><\/b>\u00a0<\/span><\/p>\n

Then<\/span>\u00a0add\u00a0<\/span>AngularAgenda\u00a0<\/span>to our app component\u00a0<\/span>HTML\u00a0<\/span>template<\/span>\u00a0<\/span><\/p>\n

\"add<\/p>\n

Now we can simply add the mgt-agenda\u00a0<\/span><\/span>web\u00a0<\/span><\/span>component\u00a0<\/span><\/span>to the\u00a0<\/span>AngularAgenda<\/span> HTML template<\/span><\/span><\/p>\n

\u00a0<\/span> \"add<\/p>\n

This is enough to have a fully functional\u00a0<\/span><\/span>mgt-<\/span><\/span>agenda displayed for the current user<\/span><\/span>\u00a0<\/span><\/p>\n

\"Fully<\/p>\n

Implementing a\u00a0<\/span>c<\/span>ustom\u00a0<\/span>t<\/span>emplate for\u00a0<\/span>mgt-agenda<\/span>\u00a0<\/span><\/h3>\n

Let\u2019s take this a step further and see how we can provide a custom template for rendering each of the agenda items.<\/span>\u00a0<\/span><\/p>\n

\"syntax<\/p>\n

This conflicts with Angular as\u00a0<\/span><\/span>double braces<\/span><\/span>\u00a0<\/span>is<\/span> the exact syntax that Angular databinding uses! The Angular compiler will not be happy.<\/span><\/span><\/p>\n

\"Error<\/p>\n

Luckily,<\/span>\u00a0the Graph Toolkit is flexible with its syntax and we can change the characters it uses for binding using the\u00a0<\/span>TemplateHelper<\/span><\/b>.<\/span>\u00a0<\/span><\/p>\n

We will do this once in our\u00a0<\/span>top-level<\/span>\u00a0App component so that it applies globally.<\/span>\u00a0<\/span><\/p>\n

\"Add<\/p>\n

Now we can use our custom binding syntax to avoid the conflict and Angular is happy again.<\/span><\/span>\u00a0<\/span><\/p>\n

\"Use<\/p>\n

We will implement the same custom template\u00a0<\/span>as\u00a0<\/span>used in the React sample<\/span>\u00a0<\/span>(taken from the post:\u202f<\/span>A Lap around Microsoft Graph Toolkit Day 5 – Customizing Components using Templates<\/span><\/a>)<\/span>\u00a0<\/span><\/p>\n

Firstly we\u00a0<\/span>will specify the\u00a0<\/span>custom<\/span>\u00a0template<\/span>,<\/span>\u00a0<\/span>using<\/span>\u00a0<\/span>data-props<\/span><\/b>\u00a0and\u00a0<\/span>data-if<\/span><\/b>\u00a0attributes to bind\u00a0<\/span>to mgt-agenda event data<\/span>. You\u2019ll also notice we are calling\u00a0<\/span>custom methods (openWebLink, getTime, getDate)<\/span>\u00a0within the custom template. We need to define those methods and make them available to the mgt-agenda component<\/span>, to do this we will need to get a handle directly on the\u00a0<\/span>instance of the mgt-agenda element\u00a0<\/span>after it is created in the DOM<\/span>.\u00a0<\/span>Using<\/span>\u00a0the\u00a0<\/span>#myagenda<\/span><\/b>\u00a0template\u00a0<\/span>reference variable<\/span>\u00a0<\/span>will allow us to easily make that connection.<\/span>\u00a0<\/span><\/p>\n

\"Use<\/p>\n

In our code for the\u00a0<\/span><\/span>AngularAgenda<\/span><\/span>\u00a0component\u00a0<\/span><\/span>we can now use the\u00a0<\/span><\/span>@ViewChild<\/span><\/span><\/strong>\u00a0property decorator to\u00a0<\/span><\/span>return a handle on the mgt-agenda element after it<\/span><\/span>\u00a0has been<\/span><\/span>\u00a0created in the DOM<\/span><\/span>\u00a0<\/span><\/span>and add our custom methods\u00a0<\/span><\/span>to the template context<\/span><\/span>\u00a0(<\/span><\/span>agendaElement.nativeElement.templateContext<\/span><\/span><\/strong>)<\/span><\/span>.<\/span><\/span>\u00a0Note\u00a0<\/span><\/span>we<\/span><\/span>\u00a0must\u00a0<\/span><\/span>specify\u00a0<\/span><\/span>the<\/span><\/span>\u00a0<\/span><\/span>@ViewChild<\/span><\/span><\/strong>\u00a0<\/span><\/span>metadata property\u00a0<\/span><\/span>static<\/span><\/span>\u00a0<\/span><\/span>with value<\/span><\/span>\u00a0true<\/span><\/span>\u00a0to<\/span><\/span>\u00a0<\/span><\/span>make Angular return the handle to\u00a0<\/span><\/span>#myagenda\u00a0<\/span><\/span>in\u00a0<\/span><\/span>the\u00a0<\/span><\/span>ngOnInit<\/span><\/span>\u00a0lifecycle hook (<\/span><\/span>by default it is not available until\u00a0<\/span><\/span>ngAfterViewInit<\/span><\/span>\u00a0which is too late to apply the\u00a0<\/span>templ<\/span><\/span>at<\/span><\/span>eContext<\/span><\/span>).<\/span><\/span><\/p>\n

\"Use<\/p>\n

With a little\u00a0<\/span><\/span>bit of styling added our demo app is now complete<\/span><\/span>!<\/span><\/span>\u00a0<\/span><\/p>\n

\"Demo<\/p>\n

T<\/span>he source code for this\u00a0<\/span>Angular sample\u00a0<\/span>is available in GitHub<\/span><\/a>.<\/span>\u00a0<\/span><\/p>\n

To Summarize<\/span>\u00a0<\/span><\/h3>\n

We have<\/span>\u00a0seen\u00a0<\/span>how we can take our learning<\/span>s<\/span>\u00a0so\u00a0<\/span>far\u00a0<\/span>in<\/span>\u00a0this series with the Microsoft Gra<\/span>p<\/span>h Toolkit and then\u00a0<\/span>apply<\/span>\u00a0it\u00a0<\/span>to<\/span>\u00a0a\u00a0<\/span>real-world<\/span>\u00a0Angular application<\/span>\u00a0by:<\/span>\u00a0<\/span><\/p>\n

    \n
  • Creating an Angular application using the Angular CLI<\/span>\u00a0<\/span><\/li>\n
  • Adding the Microsoft Graph Toolkit\u00a0<\/span>NPM<\/span>\u00a0package<\/span>\u00a0<\/span><\/li>\n
  • Configuring the\u00a0MsalProvider<\/span>\u00a0<\/span><\/li>\n
  • Using\u00a0<\/span>mgt-login and mgt-agenda web component within Angular components<\/span>\u00a0<\/span><\/li>\n
  • Specifying custom templates for the mgt-agenda component\u00a0<\/span>including property and event binding<\/span>\u00a0<\/span><\/li>\n<\/ul>\n

    We have<\/span>\u00a0almost completed our lap<\/span>, and as we round the final\u00a0<\/span>bend,<\/span>\u00a0I hope\u00a0<\/span>you have<\/span>\u00a0progressed with us from\u00a0<\/span>zero to hero<\/span>\ufe0f<\/span>.\u00a0<\/span>Stay tuned for our final article as we wrap it all up<\/span>!<\/span>\u00a0<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

    In day 14 of A Lap around Microsoft Graph Toolkit, we will show you how to add toolkit components in your Angular projects from creating an Angular project to adding custom templating!<\/p>\n","protected":false},"author":69099,"featured_media":25159,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3],"tags":[34],"class_list":["post-4990","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-graph","tag-microsoft-graph-toolkit"],"acf":[],"blog_post_summary":"

    In day 14 of A Lap around Microsoft Graph Toolkit, we will show you how to add toolkit components in your Angular projects from creating an Angular project to adding custom templating!<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/4990","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/69099"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=4990"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/4990\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/25159"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=4990"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=4990"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=4990"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

If we look at the documentation for the\u00a0<\/span>Microsoft Graph Toolkit and custom templat<\/span>ing<\/span><\/a>\u00a0we discover that the syntax for referring to the property data for each of the returned items is to use double braces as shown below.<\/span>\u00a0<\/span><\/p>\n