title: @Input Complex object, initialized through ngOnInit, throwing error Cannot Read Property of undefined
body: <p>Passing a parameter to a child component in the parent component:</p>
  
  <pre><code>&lt;app-conf-name
      [inputName]='person.name'
      (updatedNameEvent)='updateName($event)'&gt;
  &lt;/app-conf-name&gt;
  </code></pre>
  
  <p>Defined in the component TS file</p>
  
  <pre><code>@Input() inputName: Names;
  @Output() updatedNameEvent: EventEmitter&lt;Names&gt; = new EventEmitter();
  constructor() { }
  editName: Names = new Names();
  
  ngOnInit() {
    this.editName = this.inputName;
  }
  </code></pre>
  
  <p>In the class, the Names type sets a default value for the correctPerson field.</p>
  
  <pre><code>export class Names {
    indivId: number;
    firstName: string;
    prefName: string;
    lastName: string;
    suffix: string;
    updated: boolean = false;
    correctPerson: boolean = false;
    correctAsIs: boolean = false;
    correctionDate: Date;
    addedDate: Date;
  }
  </code></pre>
  
  <p>Why am I getting this error:</p>
  
  <pre><code>ERROR TypeError: Cannot read property 'correctPerson' of undefined
      at Object.View_ConfNameComponent_0._co [as updateDirectives] (ConfNameComponent.html:9)
      at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13056)
      at checkAndUpdateView (core.es5.js:12236)
      at callViewAction (core.es5.js:12601)
      at execComponentViewsAction (core.es5.js:12533)
      at checkAndUpdateView (core.es5.js:12242)
      at callViewAction (core.es5.js:12601)
      at execComponentViewsAction (core.es5.js:12533)
      at checkAndUpdateView (core.es5.js:12242)
      at callViewAction (core.es5.js:12601)
  </code></pre>
  
  <p>The Object <code>person</code> is initialized from a service that is called in the parent component.</p>
  
  <p><em>Parent Component</em></p>
  
  <pre><code>person: Person = new Person();
  constructor(private peopleService: PeopleService) { }
  state: string = 'one';
  ngOnInit() {
      this.peopleService.getPersonById(this.Id).subscribe((data)=&gt;{
        this.person = data;
        console.log(this.person);
        this.person.name.correctPerson = false;
        this.person.name.correctAsIs = false;
        this.person.email.correctAsIs = false;
        this.person.phone.correctAsIs = false;
        this.person.address.correctAsIs = false;
      });
  }
  </code></pre>
  
  <p>Note that I've initialized the property that's throwing the error a second time via an assignment.</p>
  
  <p><em>the original code for the child component used the input variable as the working variable.</em></p>
  
  <p>After Several attempts to answer this question and get the full project working, I've gotten to a point where the final child component is the last one throwing errors after putting the ngIf's everywhere.</p>
  
  <p>here's a link to the full <a href="https://github.com/cjrutherford/Sweeper" rel="nofollow noreferrer">GitHub Repo</a></p>