How to dynamically show/hide a component and pass in a value to it in Angular?

Question

The HomeEmployeeComponent below is used to display a list of employees fetched from the backend. The purpose of the <employee-form> placed at the top of the HomeEmployeeComponent template is to allow the user to edit an employee whenever any Edit button is clicked.

import {Component, ElementRef, ViewChild} from '@angular/core';
import {Observable} from "rxjs";
import {HttpClient} from "@angular/common/http";
import {map} from "rxjs/operators";

@Component({
  selector: 'app-employee-home',
  template: '' +
    '<employee-form [hidden]="true" #employeeRef></employee-form>\n' +
    '<div *ngFor="let employee of (employees$ | async)">\n' +
    '  <ul>\n' +
    '    <li>{{employee.firstname}}</li>\n' +
    '    <li>{{employee.lastname}}</li>\n' +
    '  </ul>\n' +
    '  <button (click)="handleEdit(employee)">Edit</button>\n' +
    '</div>'
})
export class EmployeeHomeComponent {

  @ViewChild("employeeRef", {read: ElementRef}) employeeFormRef!: ElementRef;

  employees$!: Observable<any>;

  constructor(private httpClient: HttpClient) {
    this.employees$ = this.httpClient.get('http://localhost:8080/employees')
      .pipe(
        map((response:any) => response.content )
      );
  }

  handleEdit(employee:any) {
    this.employeeFormRef.nativeElement['hidden'] = false
  }
}

Basically, what will be displayed by default is a list of employees with an Edit button for each one, something along those lines :

EmployeeName1, EmplyeeLastName1, EDIT_BUTTON

EmployeeName2, EmplyeeLastName2, EDIT_BUTTON

...

EmployeeNameN, EmplyeeLastNameN, EDIT_BUTTON

What I would like to do is :

First :
Display the form at the top of the page when a user clicks on any Edit button and scroll up if needed (in case a user edits an employee at the bottom of the page for example, the form will not be visible if we don't scroll up)

Second :
Somehow pass in the employee object to the FormEmployeeComponent so I can display a prefilled form based on the employee object content.

I used @ViewChild property decorator to get a reference to the employee-form element so i can show it dynamically whenever a user clicks on Edit button and I am looking for a way to pass in the employee object to the EmployeeFormComponent.

To pass in the employee object to the form component, I could save the value at the EmployeeHomeComponent level and then apply it as an input on theEmployeeFormComponent but I am looking for a better solution if possible. (see below)

What i would like to have as an answer :

First:

What do you think about the hiding solution ? Should I continue with it or is there a better way to handle it?

Second:

How i could pass in the employee object to the EmployeeFormComponent without needing to create an employee variable in EmployeeHomeComponent

Like the following :

@Component({
  selector: 'app-employee-home',
  template: '' +
    '<employee-form [hidden]="true" [employee]="employee" #employeeRef></employee-form>\n' +
    '<div *ngFor="let employee of (employees$ | async)">\n' +
    '  <ul>\n' +
    '    <li>{{employee.firstname}}</li>\n' +
    '    <li>{{employee.lastname}}</li>\n' +
    '  </ul>\n' +
    '  <button (click)="handleEdit(employee)">Edit</button>\n' +
    '</div>'
})
export class EmployeeHomeComponent {
  // ... code omitted
  employee:any;
  // ... code omitted
  handleEdit(employee:any) {
    this.employee = employee;
    this.employeeFormRef.nativeElement['hidden'] = false;
  }

}