title: ERROR TypeError: Cannot read property 'street' of undefined
body: <p>I am starting with angular and following a simple tutorial on YouTube. When I try to show the code in a browser I am getting the following error:</p>
  
  <blockquote>
    <p>ERROR TypeError: Cannot read property 'street' of undefined</p>
  </blockquote>
  
  <p>This is the code:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
      selector: 'user',
      template: `
      &lt;h1&gt;Hello {{name}}&lt;/h1&gt;
      &lt;p&gt;&lt;strong&gt;Email:&lt;/strong&gt; {{email}}&lt;/p&gt;
      &lt;p&gt;&lt;strong&gt;Address:&lt;/strong&gt; {{adress.street}}, {{adress.city}}, {{adress.state}}&lt;/p&gt;
      &lt;button (click)= "toggleHobies()"&gt; Show Hobbies&lt;/button&gt; 
      &lt;div *ngIf= "showHobies"&gt;  
        &lt;h3&gt;Hobies:&lt;/h3&gt;
        &lt;ul&gt;
          &lt;li *ngFor= "let hobby of hobbies"&gt;
            {{hobby}}
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    `,
  })
  
  export class UserComponent {
      name: string;
      email: string;
      address: address;
      hobbies: string[];
      showHobies: boolean;
  
      constructor() {
          this.name = 'John Doe';
          this.email = 'John@gmail.com'
          this.address = {
              street: '12 Main st',
              city: 'Boston',
              state: 'MA',
          }
          this.hobbies = ['Music', 'Movies', 'Sports'];
          this.showHobies = false;
  
      }
  
      toggleHobies() {
          if (this.showHobies == true) {
              this.showHobies = false;
          }
          else {
              this.showHobies = true;
          }
      }
  
  }
  interface address {
      street: string;
      city: string;
      state: string;
  }
  </code></pre>
  
  <p>I have tried to search for an answer but could not find anything that would help me. Can you please tell me why this is occurring.</p>
  
  <p>Thank you</p>