title: Passing function to child component, wrong context of 'this'
body: <p>I am trying to pass a function to a child component. Passing the function works fine. Problem is, if I want to change property values of the parent component, this wont work since 'this' is not referencing to the parent component, but to the child component (DatagridComponent in my case)</p>
  
  <p>The context of <code>this</code> seems to be the problem. See comments in code below.</p>
  
  <p>Parent component:</p>
  
  <pre><code>@Component({
    selector: 'app-user-management',
    templateUrl: './user-management.component.html',
    styleUrls: ['./user-management.component.css'],
  })
  export class UserManagementComponent implements OnInit {
    showUserDetails: boolean: false;
    showUsergroupDetails = false;
  
    onSelectUser() {
      this.showUsergroupDetails = false;
      this.showUserDetails = true;
      console.log(this.showUsergroupDetails); // prints false, as expected
      console.log(this.showUserDetails); // prints true, as expected
      console.log(this); // prints DatagridComponent :(
  }
  </code></pre>
  
  <p>HTML, passing onSelectUser as function:</p>
  
  <pre><code>&lt;app-datagrid [onSelection]="onSelectUser"&gt;&lt;/app-datagrid&gt;
  </code></pre>
  
  <p>Child component:</p>
  
  <pre><code>@Component({
    selector: 'app-datagrid',
    templateUrl: './datagrid.component.html',
    styleUrls: ['./datagrid.component.css']
  })
  export class DatagridComponent implements OnInit {
    @Input() onSelection: () =&gt; {};
  
    onSelectListItem(item: any) {
  
      // some code
  
      if (this.onSelection) {
        this.onSelection(); // is executed, results see comments in parent component
      }
    }
  }
  </code></pre>
  
  <p>HTML of child component:</p>
  
  <pre><code>&lt;div *ngFor="let item of items" (click)="onSelectListItem(item)"&gt;
     ....
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I accomplish this?</p>