template reference variable gives _r0 is not a function error

user_7550291 0
Viewed 1499

I have a search field which triggers the search method when pressed enter.

 <mat-form-field class="search-field">
    <mat-label>Search</mat-label>
    <input type="text" (keyup.enter)="search($event)"  matInput #search>
    <mat-icon matSuffix>search</mat-icon>
  </mat-form-field>

when I press the search button I get the following error

ERROR TypeError: _r0 is not a function
    at UploadPhotoComponent_Template_input_keyup_enter_4_listener (upload-photo.component.html:4)
    at executeListenerWithErrorHandling (core.js:14296)
    at wrapListenerIn_markDirtyAndPreventDefault (core.js:14331)
    at platform-browser.js:582
    at platform-browser.js:1278
    at ZoneDelegate.invoke (zone-evergreen.js:364)
    at Object.onInvoke (core.js:27149)
    at ZoneDelegate.invoke (zone-evergreen.js:363)
    at Zone.runGuarded (zone-evergreen.js:133)
    at NgZone.runGuarded (core.js:27060)

However when I changed the template reference variable from #search to #searchFiled it works fine

  <mat-form-field class="search-field">
    <mat-label>Search</mat-label>
    <input type="text" (keyup.enter)="search($event)"  matInput #searchFiled>
    <mat-icon matSuffix>search</mat-icon>
  </mat-form-field>

What is the reason for this?

angular
2 Answers

In my case, I named my login function same as one of my local Template variables

<form #login="ngForm">
            <input type="email" name="Email" #Email="ngModel" required email [(ngModel)]="email" placeholder="Enter Email">
                
            <br>
            <input type="password" name="Password" #Password="ngModel" required [(ngModel)]="password" placeholder="Enter Password">
            <br>
            <span *ngIf="showMsg">Login Failed !</span>
            <button type="button" (click)="login()" [disabled]="login.invalid">LOGIN</button>
</form>

user_128683840

Check your html. You probably have a tag like this:

<ng-template #searchFiled>

If you replace #searchFiled to #search you must change it into the ng-template too.

user_46414550
Related