Snippet fixes

Author: jasonjoh

demo/graph-tutorial/src/app/auth.service.ts

@@ -17,15 +17,15 @@ export class AuthService {
   public authenticated: boolean;
   public user: User;
 
-  // <constructor>
+  // <constructorSnippet>
   constructor(
     private msalService: MsalService,
     private alertsService: AlertsService) {
 
     this.authenticated = this.msalService.getAccount() != null;
     this.getUser().then((user) => {this.user = user});
   }
-  // </constructor>
+  // </constructorSnippet>
 
   // Prompt the user to sign in and
   // grant consent to the requested permission scopes
@@ -61,7 +61,7 @@ export class AuthService {
     return null;
   }
 
-  // <getUser>
+  // <getUserSnippet>
   private async getUser(): Promise<User> {
     if (!this.authenticated) return null;
 
@@ -94,5 +94,5 @@ export class AuthService {
 
     return user;
   }
-  // </getUser>
+  // </getUserSnippet>
 }

demo/graph-tutorial/src/app/calendar/calendar.component.ts

@@ -21,16 +21,16 @@ export class CalendarComponent implements OnInit {
     private graphService: GraphService,
     private alertsService: AlertsService) { }
 
-  // <ngOnInit>
+  // <ngOnInitSnippet>
   ngOnInit() {
     this.graphService.getEvents()
       .then((events) => {
         this.events = events;
       });
   }
-  // </ngOnInit>
+  // </ngOnInitSnippet>
 
-  // <formatDateTimeTimeZone>
+  // <formatDateTimeTimeZoneSnippet>
   formatDateTimeTimeZone(dateTime: DateTimeTimeZone): string {
     try {
       return moment.tz(dateTime.dateTime, dateTime.timeZone).format();
@@ -39,5 +39,5 @@ export class CalendarComponent implements OnInit {
       this.alertsService.add('DateTimeTimeZone conversion error', JSON.stringify(error));
     }
   }
-  // </formatDateTimeTimeZone>
+  // </formatDateTimeTimeZoneSnippet>
 }

demo/graph-tutorial/src/app/graph.service.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-// <graphService>
+// <graphServiceSnippet>
 import { Injectable } from '@angular/core';
 import { Client } from '@microsoft/microsoft-graph-client';
 
@@ -52,4 +52,4 @@ export class GraphService {
     }
   }
 }
-// </graphService>
+// </graphServiceSnippet>

demo/graph-tutorial/src/app/home/home.component.ts

@@ -25,9 +25,9 @@ export class HomeComponent implements OnInit {
 
   ngOnInit() {}
 
-  // <signIn>
+  // <signInSnippet>
   async signIn(): Promise<void> {
     await this.authService.signIn();
   }
-  // </signIn>
+  // </signInSnippet>
 }

tutorial/04-add-aad-auth.md

@@ -123,7 +123,7 @@ Right now the authentication service sets constant values for the user's display
 
 1. Add a new function to the `AuthService` class called `getUser`.
 
-    :::code language="typescript" source="../demo/graph-tutorial/src/app/auth.service.ts" id="getUser":::
+    :::code language="typescript" source="../demo/graph-tutorial/src/app/auth.service.ts" id="getUserSnippet":::
 
 1. Locate and remove the following code in the `getAccessToken` method that adds an alert to display the access token.
 
@@ -151,11 +151,11 @@ Right now the authentication service sets constant values for the user's display
 
 1. Change the `constructor` for the `AuthService` class to check if the user is already logged in and load their details if so. Replace the existing `constructor` with the following.
 
-    :::code language="typescript" source="../demo/graph-tutorial/src/app/auth.service.ts" id="constructor" highlight="5-6":::
+    :::code language="typescript" source="../demo/graph-tutorial/src/app/auth.service.ts" id="constructorSnippet" highlight="5-6":::
 
 1. Remove the temporary code from the `HomeComponent` class. Open the `./src/app/home/home.component.ts` file and replace the existing `signIn` function with the following.
 
-    :::code language="typescript" source="../demo/graph-tutorial/src/app/home/home.component.ts" id="signIn" highlight="5-6":::
+    :::code language="typescript" source="../demo/graph-tutorial/src/app/home/home.component.ts" id="signInSnippet" highlight="5-6":::
 
 Now if you save your changes and start the app, after sign-in you should end up back on the home page, but the UI should change to indicate that you are signed-in.
 

tutorial/05-add-ms-graph.md

@@ -18,7 +18,7 @@ In this exercise you will incorporate the Microsoft Graph into the application.
 
 1. Once the command completes, open the `./src/app/graph.service.ts` file and replace its contents with the following.
 
-    :::code language="typescript" source="../demo/graph-tutorial/src/app/graph.service.ts" id="graphService":::
+    :::code language="typescript" source="../demo/graph-tutorial/src/app/graph.service.ts" id="graphServiceSnippet":::
 
     Consider what this code is doing.
 
@@ -87,11 +87,11 @@ Now you can update the `CalendarComponent` component to display the events in a
 
 1. Remove the temporary code that adds an alert from the `ngOnInit` function. Your updated function should look like this.
 
-    :::code language="typescript" source="../demo/graph-tutorial/src/app/calendar/calendar.component.ts" id="ngOnInit":::
+    :::code language="typescript" source="../demo/graph-tutorial/src/app/calendar/calendar.component.ts" id="ngOnInitSnippet":::
 
 1. Add a function to the `CalendarComponent` class to format a `DateTimeTimeZone` object into an ISO string.
 
-    :::code language="typescript" source="../demo/graph-tutorial/src/app/calendar/calendar.component.ts" id="formatDateTimeTimeZone":::
+    :::code language="typescript" source="../demo/graph-tutorial/src/app/calendar/calendar.component.ts" id="formatDateTimeTimeZoneSnippet":::
 
 1. Open the `./src/app/calendar/calendar.component.html` file and replace its contents with the following.