CODEWITHSUNDEEP
angulartypescript
Jonathan Clark
Jonathan Clark

Reputation: 20538

Cannot call a method from another method in the same class

I am developing an Angular 7 app and in this app I am using a "mention" plugin in an contenteditable div. When someone has selected a value from the dropdown a method is called and I can get the selected item but the problem is that I cannot call another method in the same class where I send this selected item to the server. I get the following error:

The mentions library I use is this:

https://github.com/dmacfarlane/angular-mentions

This is my error

PageContentComponent.html:4 ERROR TypeError: this.createBlock is not a function

This is my class

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ActivatedRoute } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { BaseComponent } from '../../../../shared/components/base.component';
import { Observable } from 'rxjs';
import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';

@Component({
  selector: 'app-page-content',
  templateUrl: './page-content.component.html',
  styleUrls: ['./page-content.component.scss']
})
export class PageContentComponent extends BaseComponent implements OnInit {

  constructor(private router: Router, private route: ActivatedRoute, public api: HttpClient) { super(); }

  public path = 'pages';
  public model: any;

  ngOnInit() {}

  mentionSelect(selection): any {
    this.createBlock(selection);
    return selection.label;
  }

  createBlock(event) {
    this.isRunning = true;
    this.api.post(this.baseURL + 'blocks', {
        otype: event.type
      }).subscribe(
      data => {
        this.isRunning = false;
        this.collection.splice(parseInt(event.index, 10) + 1, 0, data);
      },
      error => {
        console.log('Error', error);
        this.isRunning = false;
      }
    );
  }

}

Why can´t I run the method? It exists and is located in the same class as mentionSelect.

Upvotes: 2

Views: 1019

Answers (1)

Igor
Igor

Reputation: 62213

It has to do with the scope of this when mentionSelect is called. Change it to an arrow function so that this is properly captured. This is not necessary all the time but when registering events with external libraries it can happen.

mentionSelect = (selection): any => {
    this.createBlock(selection);
    return selection.label;
}

createBlock = (event) => {
    ....

Upvotes: 2

Related Questions