Creating and calling a custom function inside an angular class

Omar Published at Dev

omar

I created a custom function inside a class, how do I call it within the same class?

A user enters a word in an input field. It triggers the "onNameKeyUp" function below. I have to verify if the word is plural: if yes I turn it into a singular form. I am giving below a very simplified example:

  export class HomeComponent implements OnInit {
  spelling="";

  tokenizeSpellingEnglish(item: string): string{
  if (item =="houses"){
    item = "house";
  }
     return item;
  }

   onNameKeyUp(event: any){
    this.spelling = event;
    this.spelling = this.spelling.toLowerCase();
    this.tokenizeSpellingEnglish(this.spelling);
    this.elem.nativeElement.focus();   
   }

The singular form will then be sent to the server for further processing.

the application works fine without the spelling verification.

As a side note, I am wondering if this is the right approach at all: should I parse the user input on the server instead? That being said, still I would love to know what is wrong with the above code.

night_owl

If I understand you correctly, and your example code is truly representative of your real code, I see that you are calling tokenizeSpellingEnglish but never storing the returned value back into this.spelling:

export class HomeComponent implements OnInit {
  spelling="";

  tokenizeSpellingEnglish(item: string): string{
  if (item =="houses"){
    item = "house";
  }
     return item;
  }

   onNameKeyUp(event: any){
    this.spelling = event;
    this.spelling = this.spelling.toLowerCase();

    // --> this.tokenizeSpellingEnglish(this.spelling); should be
    this.spelling = this.tokenizeSpellingEnglish(this.spelling);

    this.elem.nativeElement.focus();   
   }

You could also have tokenizeSpellingEnglish work directly on this.spelling, if that suits your use case.

If your code is instead simply failing to execute properly, I'd look at how you are unpacking the event parameter in onNameKeyUp. If you are handling the raw event object from the 'keyup' event, you need to get the value from the target property on the event object and work with that:

onNameKeyUp(event: any) {
  this.spelling = event.target.value;
  // the rest of your function as before
}

HTH

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2020-12-3

Comments

0 comments

From Dev

Related Related

Article

Creating and calling a custom function inside an angular class

Creating and calling a custom function inside an angular class

Angular 2 custom validation not calling inside of component function

Calling a recursive function inside a class

Initiating and calling a function inside class

Calling an async function inside a class

Creating a function inside a function inside a class

calling function inside angular factory

PHP Calling A Class function inside B Class

Creating a UIImageView inside a custom UITableViewCell Class (Swift)

JS - Calling class methods inside of callback function

Calling a class function inside of __init__

Calling a function inside same class not working, typescript

Calling a function pointer inside the same class

Creating a Global Instance of a Class Inside of a Function

Creating a DataBase Table inside a Class as a Function

Creating Unittest class inside function not working

Calling function inside callback throws error in Angular

calling function inside javascript class : this.function is not a function

Creating and calling custom exceptions

Angular - Calling a function from an extended class

Call a function inside a class when calling the class in python

calling a function inside a class from another class php

C++ calling a class function inside another function

Defining custom function/property inside anonymous class

What am i doing wrong in creating and calling this simple class function?

Angular - calling service function inside eventlistener function returns undefined error

angular 2 function calling inside an http post function

Angular 5:Calling service method inside custom validator

Calling a custom scalar DB function inside a LINQ to Entities query?

Android: Calling a function inside a fragment from a custom action bar

Calling a class function inside of init