Updated angular app sample (#638)

* Updated readme

* Added reload logic to angular app

Author: shweaver-MSFT

samples/angular-app/README.md

@@ -5,17 +5,18 @@ This project was generated with [Angular CLI](https://github.com/angular/angular
 ## Getting Started
 The is the sample code explained in [A Lap Around the Mircosoft Graph Toolkit Day 14 - How to use Microsoft Graph Toolkit with Angular](https://developer.microsoft.com/en-us/graph/blogs/a-lap-around-microsoft-graph-toolkit-day-14-using-microsoft-graph-toolkit-with-angular/)
 
-> NOTE: This sample is linked to the locally built mgt packages. If you haven't already, run `npm i -g yarn` in the root of the repo before getting started.
+> NOTE: This sample is linked to the locally built mgt packages. If you haven't already, run the following commands in the root of the repo before getting started.
+```bash
+npm i -g yarn
+yarn
+yarn build
+```
 
 1. In a web browser, navigate to the Azure Portal and create a new [App Registration](http://aka.ms/AppRegistrations) with the following Graph API permissions:
     * `openid`
     * `profile`
     * `user.read`
     * `calendars.read`
 1. Record the **Client Id** value for later.
-1. Open up a terminal instance at the repo root.
-1. `yarn` to download all dependant npm packages.
-1. `yarn build` to build the local mgt packages.
-1. `cd ./samples/angular-app` to navigate to the angular sample folder.
-1. Modify `src/app/app.component.ts` by replacing `[YOUR-CLIENT-ID]` with the Azure App Registration **Client Id** from earlier.
-1. Run `ng start` for a local dev server and navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+1. Modify `src/environment/environment.msal.ts` by replacing `[YOUR-CLIENT-ID]` with the Azure App Registration **Client Id** from earlier.
+1. Run `yarn start` for a local dev server and navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

samples/angular-app/src/app/app.component.html

@@ -1,14 +1,15 @@
 <app-nav-bar></app-nav-bar>
-<app-angular-agenda *ngIf="this.isLoggedIn(); else: notLoggedIn"></app-angular-agenda>
+<app-angular-agenda #agenda *ngIf="this.isLoggedIn; else notLoggedIn"></app-angular-agenda>
 
 <ng-template #notLoggedIn>
-    <div class="container mx-auto" style="margin-top: 20px">
-        <div class="flex items-center bg-blue-500 text-white text-sm font-bold px-4 py-3" role="alert">
-            <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-                <path
-                    d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z" />
-            </svg>
-            <p>You aren't logged in!.</p>
-        </div>
+  <div class="container mx-auto" style="margin-top: 20px">
+    <div class="flex items-center bg-blue-500 text-white text-sm font-bold px-4 py-3" role="alert">
+      <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+        <path
+          d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z"
+        />
+      </svg>
+      <p>You aren't logged in!</p>
     </div>
-</ng-template>
+  </div>
+</ng-template>

samples/angular-app/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
 import { MsalService } from '@azure/msal-angular';
 import { MsalProvider } from '@microsoft/mgt';
 import { LoginType, Providers, ProviderState, TemplateHelper } from '@microsoft/mgt-element';
@@ -11,20 +11,24 @@ import { MSALAngularConfig } from '../environments/environment.msal';
 })
 export class AppComponent implements OnInit {
   title = 'demo-mgt-angular';
+  isLoggedIn: boolean = false;
 
-  constructor(msalService: MsalService) {
+  constructor(msalService: MsalService, private cd: ChangeDetectorRef) {
     Providers.globalProvider = new MsalProvider({
       userAgentApplication: msalService,
       scopes: MSALAngularConfig.consentScopes,
       loginType: MSALAngularConfig.popUp === true ? LoginType.Popup : LoginType.Redirect
     });
 
-    TemplateHelper.setBindingSyntax('[[', ']]');
-  }
+    Providers.globalProvider.onStateChanged(() => this.onProviderStateChanged());
 
-  public isLoggedIn() {
-    return Providers.globalProvider.state === ProviderState.SignedIn;
+    TemplateHelper.setBindingSyntax('[[', ']]');
   }
 
   public ngOnInit() {}
+
+  private onProviderStateChanged() {
+    this.isLoggedIn = Providers.globalProvider.state === ProviderState.SignedIn;
+    this.cd.detectChanges();
+  }
 }

samples/angular-app/src/environments/environment.msal.ts

@@ -7,7 +7,7 @@ const isIE = window.navigator.userAgent.indexOf('MSIE ') > -1 || window.navigato
 
 export const MsalConfig: Configuration = {
   auth: {
-    clientId: 'a974dfa0-9f57-49b9-95db-90f04ce2111a',
+    clientId: '[YOUR-CLIENT-ID]',
     authority: 'https://login.microsoftonline.com/common/',
     validateAuthority: true,
     redirectUri: 'http://localhost:4200/',