Accepted answer

dom is ready in memory. Maybe you could use a other lifecyle.

ngAfterViewInit() {

Accepted answer

@ViewChild('keywords-input') keywordsInput; doesn't match id="keywords-input"


should be instead a template variable:


Note that camel case should be used, since - is not allowed in template reference names.

@ViewChild() supports names of template variables as string:

@ViewChild('keywordsInput') keywordsInput;

or component or directive types:

@ViewChild(MyKeywordsInputComponent) keywordsInput;

keywordsInput is not set before ngAfterViewInit() is called

in my code inside @ViewChild element I was using *ngIf like below.

<ul class="menu" *ngIf="isMenuOpen" #menu>
  <li *ngFor="let data of dropdownData" (click)="onClickOfVal(data)">
    {{ data }}

change to

<ul class="menu" [style.display]="isMenuOpen ? 'block' : 'none'" #menu>
  <li *ngFor="let data of dropdownData" (click)="onClickOfVal(data)">
    {{ data }}

i just checking undefied

` @ViewChild('myinput') myInputField: ElementRef;

ngAfterViewInit() {

if (this.myInputField !== undefined) {


you will have to deal with the following ViewChild declaration i.e.

@ViewChild(selector: string | Function | Type<any>, opts: {
read?: any;
static: boolean;

Now, the interesting part is the static value, which by definition says

  • static - True to resolve query results before change detection runs

Now for rendering a map, I used the following ,

@ViewChild('map', { static: true }) mapElement: any;
  map: google.maps.Map;
In Angular 8+ for @ViewChild decorator (and also for @ContentChild) you have to provide two metadata properties 'selector'  and 'static' (the third metadata property 'read' is optional).
If you access the selected element inside of ngOnInit() you have to set {static: true} and if you don't access selected element in ngOnInit() set {static: false}.  

So, for solving errors:
1. in  DoctorAvailabilityComponent change your code to @ViewChild('availabilityObj'{static: true}) public availabilityObjListView;
2. in CalendarComponent change your code to @ViewChild('specialistObj'{static: true}specialistObjDialogComponent;
3. in DoctorsComponent change your code to @ViewChild('specialistItemObj'{static: true}) public specialistItemObjany;

try it with ngAfterViewInit() instead of ngOnInit(). Its later in the Lifecycle Hook and cardElement should be available after this.