ERROR TypeError: _co.onCLk is not a function

Question

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)

Answer 1

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

From

 (click)="onCLk($event)"

To

 (click)="onClk($event)"

Answer 2

below code will do.

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