Replaced attribute serrialization with property assignment in render function

Author: nmetulev

src/components/mgt-agenda/mgt-agenda.ts

@@ -290,15 +290,13 @@ export class MgtAgenda extends MgtTemplatedComponent {
     return html`
       <mgt-people
         class="event-attendees"
-        people=${JSON.stringify(
-          event.attendees.map(
-            attendee =>
-              <MgtPersonDetails>{
-                displayName: attendee.emailAddress.name,
-                email: attendee.emailAddress.address,
-                image: '@'
-              }
-          )
+        .people=${event.attendees.map(
+          attendee =>
+            <MgtPersonDetails>{
+              displayName: attendee.emailAddress.name,
+              email: attendee.emailAddress.address,
+              image: '@'
+            }
         )}
       ></mgt-people>
     `;

src/components/mgt-login/mgt-login.ts

@@ -208,7 +208,7 @@ export class MgtLogin extends MgtBaseComponent {
   renderLoggedIn() {
     if (this.userDetails) {
       return html`
-        <mgt-person person-details=${JSON.stringify(this.userDetails)} show-name />
+        <mgt-person .personDetails=${this.userDetails} show-name />
       `;
     } else {
       return this.renderLogIn();
@@ -221,7 +221,7 @@ export class MgtLogin extends MgtBaseComponent {
     }
 
     let personComponent = html`
-      <mgt-person person-details=${JSON.stringify(this.userDetails)} show-name show-email />
+      <mgt-person .personDetails=${this.userDetails} show-name show-email />
     `;
 
     return html`

src/components/mgt-people/mgt-people.ts

@@ -105,7 +105,7 @@ export class MgtPeople extends MgtTemplatedComponent {
 
   private renderPerson(person: MicrosoftGraph.Person) {
     return html`
-      <mgt-person person-details=${JSON.stringify(person)}></mgt-person>
+      <mgt-person .personDetails=${person}></mgt-person>
     `;
   }
 }