title: Property '<>' does not exist on type 'Component' Angular 12
body: <p>I am passing an object 'customer$' through to my html file using an observable and async pipe. The object contains an array of addresses which I would like to use to create a list using *ngFor; however, I am getting the error <code>Property 'address' does not exist on type 'CustomersComponent'.</code> Is it because I am referencing the customer set in the parent div?</p>
  <p>here are my component.ts and html files, the line in the htmle file <code>&lt;p&gt;{{ address.addressOne }}&lt;/p&gt;</code> is the one resulting in the error</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { Observable } from 'rxjs';
  import { ActivatedRoute } from '@angular/router';
  
  import { Customer } from '../shared/models/customer.model'
  
  import { CustomersService } from './customers.service';
  import { Address } from '../shared/models/address.model';
  
  @Component({
    selector: 'app-customers',
    templateUrl: './customers.component.html',
    styleUrls: ['./customers.component.scss']
  })
  
  export class CustomersComponent implements OnInit {
    customer$!: Observable&lt;Customer | undefined&gt;;
  
    constructor(
      private customerService: CustomersService,
      private activatedRoute: ActivatedRoute,
      ) { }
  
    ngOnInit(): void {
      const id = this.activatedRoute.snapshot.params.id
  
      this.customer$ = this.customerService.getCustomer(id);
    }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container" *ngIf="customer$ | async as customer"&gt;
      &lt;div class="customer-header"&gt;
          &lt;h1&gt;{{ customer['people'][0].firstName }} {{ customer['people'][0].lastName }}&lt;/h1&gt;
          &lt;p&gt; {{ customer['people'][0].email }}&lt;/p&gt;
          &lt;p&gt; {{ customer['people'][0].phoneNumber }}&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="interested-addresses" *ngIf="customer['interestedAddress']"&gt;
          &lt;ng-container *ngFor="address of customer['interestedAddress']"&gt;
              &lt;p&gt;{{ address.addressOne }}&lt;/p&gt;
          &lt;/ng-container&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Here is my model for the customer -</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {Address} from './address.model'
  import {Person} from './person.model'
  import {Note} from './notes.model'
  
  export class Customer {
      public id: string;
      public people: Person[];
      public interestedAddress: Address[];
      public notes: Note[];
      public underContract: boolean;
  
  
      constructor (id: string, people: Person[], interestedAddress: Address[], notes: Note[], underContract: boolean) {
          this.id = id;
          this.people = people;
          this.interestedAddress = interestedAddress;
          this.notes = notes;
          this.underContract = underContract;
      }
  }</code></pre>
  </div>
  </div>
  </p>
  <p>And here is the model for the address -</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export class Address {
      public addressOne: string;
      public addressTwo?: string;
      public city: string;
      public stateCode: string;
      public zipCode: string;
  
      constructor (addressOne: string, city: string, stateCode: string, zipCode: string, addressTwo?: string) {
          this.addressOne = addressOne;
          this.city = city;
          this.stateCode = stateCode,
          this.zipCode = zipCode,
          this.addressTwo = addressTwo
      }
  }</code></pre>
  </div>
  </div>
  </p>