TypeScript this.X is not a function

Question

I am using Angular 6 to build an application. In my application I have the following code:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})

export class SearchComponent implements OnInit {

  constructor(private http: HttpClient) {}

  setBackgroundImage(){
    //code here..
  }

  searchCard(evt) {
    evt.preventDefault();

    let inputField_Id = <HTMLInputElement>document.getElementById("inputField_Id");
    let id = inputField_Id.value;
    //code here..

    if(id){
      let url = "http://localhost:3000/card/" + id;
      this.sendToServer(url);   //This is where the problem is
    }
  }

  sendToServer(url){
    this.http.get(url).subscribe(response => {
        //code here..
    });
  }

  ngOnInit() {
    this.setBackgroundImage();

    let searchForm = document.getElementById("searchForm");
    searchForm.addEventListener("submit", this.searchCard);
  }
}

I am trying to call the method/function sendToServer from within the function searchCard, but I can't manage to do it. It tells me that "this.sendToServer is not a function at ..."

If I console.log(this); within searchCard I get the HTMLform-element which triggers the submit event.

If I created a let self = this; variable within the function I get the same results.

Instead I tried creating self as a property of the class SearchComponent, and setting self = this; from within the ngOnInit function. But then self == the window object. I tried the same thing from within the constructor, but with the same results.

How can I call sendToServer from within searchCard?

Possible duplicate of [When should I use Arrow functions in ECMAScript 6?](https://stackoverflow.com/questions/22939130/when-should-i-use-arrow-functions-in-ecmascript-6) — Suraj Rao, Jun 16 '18 at 09:33
Possible duplicate of [How does the "this" keyword work?](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) — Andreas, Jun 16 '18 at 09:35

Matan Shushan · Accepted Answer · 2018-06-16T09:37:57.100

1

Try this

searchForm.addEventListener("submit", (event)=>{
 this.searchCard(event);
 });

Its should work fine

its works because arrow functions bind context , know the this in the next function is same this as the class and we can call a function from the class with this .

You can read more about arrow function and binding here

edited Jun 16 '18 at 09:37

answered Jun 16 '18 at 09:30

Matan Shushan

1,034
7
19

@Phrosen because arrow functions bind context. – jonrsharpe Jun 16 '18 at 09:33
1

While this code may answer the question, providing additional context regarding _how_ and/or _why_ it solves the problem would improve the answer's long-term value. – Andreas Jun 16 '18 at 09:34
You can read more about the arrow function here .https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions – Matan Shushan Jun 16 '18 at 09:35

TypeScript this.X is not a function

1 Answers1