Passing function to child component, wrong context of 'this'

The question is more about this context, which you can fix it this way :

onSelectUser = ()=>{ // note this part 
    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 :(
}

We're using fat arrow to keep the context of the current component inside the function

Use Output event to communicate from child component to parent component. Use Input property binding to pass data from parent to child

Html

<app-datagrid (onSelection)="onSelectUser($event)"></app-datagrid>

Component

@Component({
  selector: 'app-datagrid',
  templateUrl: './datagrid.component.html',
  styleUrls: ['./datagrid.component.css']
})
export class DatagridComponent implements OnInit {
  @Output() onSelection: EventEmitter<any> = new EventEmitter();

  onSelectListItem(item: any) {
     this.onSelection.emit(item);
  }
}

//app-user-management method will receive item object
onSelectUser(item: any) {
   //here you would have item object.
}

See Also Component Interaction