ERROR TypeError: _co.onCLk is not a function

Viewed 58314

Trying one code in Angular 2 its HTML is running but angular code is not executing it says the value which i am passing from html is not a function. Please help!

HTML: app.html - i am trying to show the student details. I have a list of items in angular app.component.ts file which i am calling on HTML page which is working fine. But when i am passing a value on a click event to app.component.ts fine its giving error and showing on console that this is not a function.

<div class ="card search">
    <h1 class = "search-headline"> Student Directory</h1>
    <label class = "search-label"> Search 
        <span *ngIf = "name">for: {{ name }}</span></label>
        <input class = "search-input" #newStudent>
        <button class ="btn"
        (click)="addstudent(newstudent.value)"
        >Add</button>
</div>

<ul class="studentlist cf">
<li class="studlist-item cf" *ngFor="let stud of students" (click)="onClk($event)">
    <h2 class="student-name">{{ stud.name }}</h2>
    <h3 class="student-emp">{{ stud.Empname }}</h3>
</li>
</ul>

Angular component.app.ts: Here i am defining variables and add click event to show name i am clicking from the html to show on UI. At the same time i have given a ability to add more names to the already added list on the UI.

import { Component } from '@angular/core';

@Component({
  selector: 'app',
  templateUrl: './partials/app.html'
})

export class AppComponent {
  name: string;
  students: any;
  event: any;

  onClk(event){
   this.name = event.target.innerHTML;
  }

  addstudent(value){
    if(value!=' '){
      this.students.push({
        name: value,
        Empname: 'xyz'
      });
    }
  }

  constructor(){
  this.students = [
    {
      name: 'Robin',
      Empname: 'abc' 
    },{
      name: 'Jack',
      Empname: 'Bcd' 
    },{
      name: 'John',
      Empname: 'Cde' 
    }
  ]
  }

}

Getting error message on console when i run the code: Type error i am getting here is onCLK is not a function. Its a function which is returning value form HTML to app.component.ts file and from there we are getting the value we clicked. Also getting many other errors not sure what does that mean?

app.html:12 ERROR TypeError: _co.onCLk is not a function
at Object.eval [as handleEvent] (app.html:12)
at handleEvent (view.ts:142)
at callWithDebugContext (services.ts:815)
at Object.debugHandleEvent [as handleEvent] (services.ts:411)
at dispatchEvent (util.ts:185)
at eval (element.ts:238)
at HTMLLIElement.eval (dom_renderer.ts:75)
at ZoneDelegate.invokeTask (zone.js:425)
at Object.onInvokeTask (ng_zone.ts:288)
at ZoneDelegate.invokeTask (zone.js:424)
4 Answers

You have named the function wrong in your template, Change "L" to "l"

From

 (click)="onCLk($event)"

To

 (click)="onClk($event)"

This error occurs sometime when you are writing a (event)="myFunc()" in the html and not calling in ts file.

To anyone who reaches here and none of the other options helps him: In my case I had these buttons:

<button (click)="logout();" class="btn btn-primary my-1" >Logout</button> <button (click)="login();" class="btn btn-primary my-1" >Login</button>

The login worked but logout didn't. and I had both functions in my .ts file. I've just deleted the logout button and copied the login button, (I could also just rewrite it) then copied the name of the function in .ts file to the click event. That solved the issue for me.

Related