Typescript Angular另一个组件的nativeelement未定义

ı有两个组件，其中一个是在另一个组件内部使用的组件.

ModalComponent ModalComponent

import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-modal',
  templateUrl: './Modal.component.html',
  styleUrls: ['./modal.component.css'],
})
export class ModalComponent ModalComponent implements OnInit {
  @Input() title: string;
  @Input() name: string;
  @ViewChild('close') public closeModal: ElementRef;

  constructor() {}

  ngOnInit(): void {}

  close() {

this.closeNodal.nativeElement.click()
  }
}

Modal.component.html

<div
class="modal"
[id]="name"
tabindex="-1"
role="dialog"
aria-labelledby="defModalHead"
aria-hidden="true"
>
<div class="modal-backdrop in"></div>
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
   <button type="button" #close class="close" data-dismiss="modal">
        <span aria-hidden="true">&times;</span
        ><span class="sr-only">Close</span>
      </button>
      <h2 class="modal-title success">{{title}}</h2>
    </div>

    <div class="panel panel-danger">
    <ng-content></ng-content>
    </div>
    <div class="modal-footer"></div>
  </div>
</div>
</div>

HomeComponent.html

<app-modal name="personAdd" title="Person Add Form">
  <P>FORM ELEMENTS </P>

  <button>Add</button>
</app-modal>

HomeComponent.ts

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit  {
  @ViewChild('ModalComponent ModalComponent') modalComponent: ModalComponent ModalComponent;

  constructor(
   
  ) {}


  ngOnInit(): void {
   
  }


  PersonMovementAdd() {
    this.modalComponent.close()

  }
 



}

当ı点击Add按钮时，ı想要到达modalComponent的Close()方法，但ı接受了未定义的错误.ı如何从Home Component到达modalComponent的Close()方法