title: Angular (4): pass a class object from child to parent component
body: <p>I can pass a class object like <code>Person</code> into a <code>child</code> component from <code>parent</code> component without any problems. But I would like to also manipulate that object in <code>child</code> component and pass it back to <code>parent</code> component.</p>
  
  <p><strong>This is the child component class:</strong></p>
  
  <pre><code>export class ActionPanelComponent {
    @Input('company') company: Company;
    @Output() notify: EventEmitter = new EventEmitter();
  
    constructor() {
    }
  
    public deleteCompany() {
      console.log('display company');
      console.log(this.company);
      // FIXME: Implement Delete
      this.company = new Company();
    }
  
    public onChange() {
      this.notify.emit(this.company);
    }
  
  }
  </code></pre>
  
  <p><strong>This is the html of this component (excerpt):</strong></p>
  
  <pre><code>&lt;div class="row" (change)="onChange()"&gt;
    &lt;div class="col-xs-2"&gt;
      &lt;button md-icon-button &gt;
        &lt;md-icon&gt;skip_previous&lt;/md-icon&gt;
      &lt;/button&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>This is the parent component class (excerpt):</strong></p>
  
  <pre><code>  public onNotify(company: Company):void {
      this.company = company;
    }
  </code></pre>
  
  <p><strong>And the parent component html (excerpt):</strong></p>
  
  <pre><code>&lt;action-panel [company]="company" (notify)="onNotify($event)"&gt;&lt;/action-panel&gt;
  </code></pre>
  
  <p>I am doing something wrong because I cannot pass my <code>company</code> object inside the <code>.emit</code> and nothing works.</p>
  
  <p>What is the correct way of achieving two way object binding between components?
  Thanks in advance!</p>