Angular Modal undefined nativeElement - html

Question

I'm getting the following error when trying to close my modal:
cannot read property nativeElement of undefined
The element has been rendered by time i'm trying to close it so I'm not sure what else it could be.
Modal code:
<div class="modal" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<button type="button" class="btn btn-primary" (click)="close()">Close</button>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
</div>
Typescript:
import { Component, OnInit, ElementRef, ViewChild } from '#angular/core';
#Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {
constructor() { }
#ViewChild('myModal') closeModal: ElementRef;
ngOnInit() {
}
close() {
this.closeModal.nativeElement.click();
}
}

Answer 1

ViewChild uses a template reference variable, not the id, to refer to the element. You should set the variable myModal on the target element in the template markup:
<div class="modal" #myModal ...>
so that you can refer to that element with ViewChild:
#ViewChild('myModal') closeModal: ElementRef;