Cannot read property 'nativeElement' of undefined angular 7

This error is one of the common error which we get when there is a mismatch in the typescript and html in Angular 7.

To avoid this error kindly notice the below code for reference

In example.component.ts        

@ViewChild("nameField")nameField:ElementRef;

In example.component.html

<input                      

             cdk-focus-initial 

             #nameField

             type="text" 

             placeholder="Service Name" 

             matInput

             [matAutocomplete]="auto" 

             formControlName="serviceName" 

             [(ngModel)]="serviceName"

             (input)="getserviceOnSearch()" 

  data-automation-attribute="text-service-name" />