Uncaught ReferenceError: for onclick

Issue

I am getting the Uncaught ReferenceError: for onclick event handler

  <ng-conatiner *ngIf="x else y" >
     <div onclick="x()"> {{x.getText()}} </div> 
  </ng-conatiner>

   <ng-template #y>
    <div>{{y.getText()}}</div>
   </ng-template>

  export class A implements OnInit {
    ngOnInit() {
        console.log("in ngOnInit");    
    } 
    x(){
        console.log("clicked");
     }

  }

expected result would be see clicked in console but i am getting uncaught reference error.

Can someone help me?

Solution

You should use (click)="x()" instead of onclick

<ng-conatiner *ngIf="x else y" >
     <div (click)="x()"> {{x.getText()}} </div> 
 </ng-conatiner>

Here is Angular’s documentation page for further reading:
https://angular.io/guide/user-input

UPDATE

Here is a tutorial about event binding:

https://angular-2-training-book.rangle.io/handout/components/app_structure/responding_to_component_events.html

Answered By – Harun Yilmaz

Answer Checked By – Katrina (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.