When trying to invoke an Angular function from a JavaScript function, it is returning as undefined

When attempting to invoke an Angular function from a JavaScript function, I am encountering an issue where it is displaying as undefined.

Below is an example demonstration I have created:

import { Component, NgZone, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { GetSelectedProductService } from '../ServiceOfService/get-selected-product.service';
import { Router } from '@angular/router';


function process(){
..
..

 this.processDone(response);

   //when I call processDone function from here, it throws an 'undefined exception'. 
}


@Component({
  selector: 'app-payment-process',
  templateUrl: './payment-process.component.html',
  styleUrls: ['./payment-process.component.css']
})
export class PaymentProcessComponent implements OnInit {

   constructor() {}

   ngOnInit(): void { }


    processDone(response){
        console.log(response);
    }
  }

Answer №1

It's important to note that calling a Component's function from outside the component itself is not possible. The function must be invoked within the Component.

One thing that needs clarification is the method by which process is being called initially. This aspect should be addressed for better understanding.

import { Component, NgZone, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { GetSelectedProductService } from '../ServiceOfService/get-selected-product.service';
import { Router } from '@angular/router';


@Component({
  selector: 'app-payment-process',
  templateUrl: './payment-process.component.html',
  styleUrls: ['./payment-process.component.css']
})
export class PaymentProcessComponent implements OnInit {

   constructor() {}

   ngOnInit(): void { }


   processDone(response){
     console.log(response);
   }
   
   process(){
     ..
     ..
     this.processDone(response);
   }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a Tree Hierarchy with Angular 4 FormArray

Looking for a demonstration on how to effectively utilize FormArray with a Tree Structure? I am currently working on implementing inline editing for a hierarchical system Although I have managed to make it functional for the initial level, I am facing ch ...

Unable to invoke JS function in Drupal 5 file

In my current project using Drupal 5, I have a specific .js file that is included using the code: drupal_add_js(drupal_get_path('module','MTM')."/include/JS_form.js"); Additionally, there is an element on the page: <a onclick="MTM ...

I'm encountering a 502 error while trying to use Supabase's signInWIthPassword feature

Despite all authentication functions working smoothly in my React, TypeScript, and Supabase setup, I'm facing an issue with signInWithPassword. In my context: I can successfully signIn, create a profile, and perform other operations like getUser() an ...

Passing data from PHP to jQuery in a file upload script

I'm facing a problem that I can't seem to solve on my own. What I am trying to achieve is to upload a file to the server via PHP (upload.php), generate a new filename, and then pass that new filename to my webpage (upload.html). Within my uploa ...

Guide on spinning a particle in three.js

I am encountering an issue with a particle that leaves a circle behind when rotated as an image. How can I eliminate this unwanted circle effect? Check out the code on this Fiddle: http://jsfiddle.net/zUvsp/137/ Here's the code snippet: var camera, ...

Arranging elements in two arrays in either ascending or descending order

Looking to implement sorting functionality for the "fuel.name" value within this array... const orders = [ { "_id":"5d14a31490fb1e0012a3d2d8-1", "orderId":"0JL5ORM0JT-1", "created":"2019-06-27T11:05:56.377Z", "createdDate":"2019-06-2 ...

What is the process for adjusting the color of a mat-divider?

Has anyone been successful in changing the color of mat-divider? I attempted the following but had no luck: component.html <mat-divider class="material-devider"></mat-divider> component.scss .material-devider { color: red } ...

Enlarging an image on canvas and creating a repeating pattern

My canvas size is 500px x 500px. I have a png image that matches the canvas size, which you can view here. I am looking to resize the image to 100px x 100px and then use it as part of a repeat pattern on the canvas. This is how I achieve this: // First d ...

Exploring into the subdirectory

I am trying to redirect to a subfolder ASPX page from the index.html page upon page load, but I am encountering an error with the following code: window.location.href = 'URL= HMIS/Login.aspx'</script> Error Resource cannot be found. D ...

How to deactivate an option in md-autocomplete

I encountered a scenario where I converted an md-input-container with a md-select/md-option to a md-autocomplete. While in the initial setup of md-select/md-option, we were able to apply ng-disabled property to both the md-select and md-option. However, wh ...

What is the best way to disconnect an ngFor loop from its original context and reconnect it to a wrapping component's context when utilized as projected content?

In my project, I've developed a custom wrapping component that accepts <div *ngFor='let item of items> as part of its projected content. My goal is to replace the immediate bindings within the projected content with those defined in the wr ...

Angular.js Issue: Repeating elements must be unique - Index tracking not functioning properly

I have been following a tutorial on the Ionic Framework, which utilizes Angular JS to develop a basic Todo application. The app adds a new task by utilizing the .push() method to append a new task object to an array of task objects. An issue arises when a ...

Is there a way to set the submitted variable to true when the form group is submitted, then revert it to false when the user makes changes to the form?

With just one FormGroup, I ensure that when a user submits the form with errors the 'submitted' variable is set to true, displaying the errors. However, my challenge now is how to reset this variable to false when the user makes any changes after ...

Retrieve the highest integer from the server-side for the client

When creating input fields of type number on the client side, I have been setting their max attribute to the maximum integer value in the user's browser using: Number.MAX_SAFE_INTEGER.toString() Now, I need to output an input field on the se ...

Tips on implementing lazy loading for HammerJS in an Angular 9 application

In my Angular project, I utilize HammerJS to incorporate gestures such as panleft and panrigth in a lazy-loaded component. Despite having the lazy load component in a separate bundle during app building, hammer.js remains in node_modules within the main bu ...

What is the best way to display a form within every row of a data table?

I am currently working on a page that retrieves data from a backend and displays it in a Datatable. One of the columns in my table is an input field with a default value fetched from the backend, and another column contains buttons. How can I implement a f ...

Ways to transfer data from TypeScript to CSS within Angular 6

Trying to work with ngClass or ngStyle, but I'm struggling with passing the value. Here's my current code: strip.component.ts import { ... } from '@angular/core'; @Component({ selector: 'app-strip', templateUrl: &apo ...

Leveraging the spread operator in cases where the value is null

Is there a more elegant solution for handling null values in the spread operator without using if-else statements? In this specific case, I only want to spread assignedStudents if it is not undefined. When attempting to do this without using if-else, I e ...

What is the official name of the key type for the Built-in Object?

There was a built-in type that I used in the past which represented the union of all possible object keys. It was named objectKey or something similar. Here is an example: type objectKey = string | number | symbol Unfortunately, I am drawing a blank on t ...

Create a TypeScript view component that encapsulates an HTMLElement for seamless integration with TweenMax

Looking to develop my own basic view component class that encompasses an HTMLElement or JQuery element, I want to be able to do something similar to this: var newComponent:CustomComponent = new CustomComponent($('#someDiv')); TweenMax.to(newCom ...