Angular another component's nativeelement is undefined

Question

ı have two component .one of them is ModalComponent that uses inside another component.

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 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;

  constructor(
   
  ) {}


  ngOnInit(): void {
   
  }


  PersonMovementAdd() {
    this.modalComponent.close()

  }
 



}

when ı click add button ı want to reach modalcomponent's close() method but ı take undefined error.How can ı reach modalcomponent's close() method from homecomponent

Answer 1

try:

@ViewChild(ModalComponent) modalComponent: ModalComponent;

instead of:

@ViewChild('ModalComponent') modalComponent: ModalComponent;