updated mgtnew snippet

Author: nmetulev

.vscode/snippets/typescript.json

@@ -1,6 +1,6 @@
 {
   "MgtComponent": {
-    "prefix": "newmgt",
+    "prefix": "mgtnew",
     "body": [
       "import { html, css, customElement, property } from 'lit-element';",
       "import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';",
@@ -11,18 +11,21 @@
       "@customElement('${1:mgt-component}')",
       "export class ${2:MgtComponent} extends MgtTemplatedComponent {",
       "  @property({",
-      "  attribute: 'my-name',",
+      "  attribute: 'my-title',",
       "    type: String",
       "  })",
-      "  myName: string;",
+      "  myTitle: string = 'My First Component';",
+      "",
+      "  // assignment to this property will re-render the component",
+      "  @property({ attribute: false }) private _me: MicrosoftGraph.User;",
       "",
       "  attributeChangedCallback(name, oldval, newval) {",
       "    super.attributeChangedCallback(name, oldval, newval);",
       "",
       "    // TODO: handle when an attribute changes.",
       "    //",
       "    // Ex: load data when the name attribute changes",
-      "    // if (name === 'name' && oldval !== newval){",
+      "    // if (name === 'person-id' && oldval !== newval){",
       "    //  this.loadData();",
       "    // }",
       "  }",
@@ -40,25 +43,27 @@
       "    }",
       "",
       "    // TODO: load data from the graph",
+      "    this._me = await provider.graph.client.api('/me').get();",
       "  }",
       "",
       "  static get styles() {",
       "    return css`",
-      "      .root {",
+      "      .title {",
       "        color: red;",
       "      }",
       "    `;",
       "  }",
       "",
       "  render() {",
-      "    return html`",
+      "    $0return html`",
       "      <div class='root'>",
-      "        Hello ${this.myName}!$0",
+      "        <h1 class='title'>${this.myTitle}</h1>",
+      "        ${this._me ? `Hello ${this._me.displayName}` : `Not signed in`}!",
       "      </div>",
       "    `;",
       "  }",
       "}"
     ],
-    "description": "Create New Component"
+    "description": "Create New Mgt Component"
   }
 }