Angular 2 does not recognize the existence of .then in type void

I have a query regarding Angular2 and I'm struggling with the void function in my code. Can someone help me out? I am new to Angular2 and unsure of what needs to be added in the void function. Check out this image for reference

export class PasswordResetPage {

  email : string;

  constructor(public navCtrl: NavController, 
              public navParams: NavParams , 
              public userservice :UserProvider,
              public AlertCtrl :AlertController) { }

  reset(){
    let alert = this.AlertCtrl.create({
      buttons :['ok']
    });
    this.userservice.passwordreset(this.email).then((res: any)=>{
      if(res.success){
        alert.setTitle('Email sent');
        alert.setSubTitle('please follow the instructions in the email
                           to reset the password')
      }
      else{
        alert.setTitle('failed');
      }
    })
  }
}

Answer №1

Understanding the return type of a service call is crucial:

this.userservice.passwordreset(this.email)

When using .then, make sure the service call returns a Promise. If it's more likely returning an Observable, then subscribing to it is necessary to retrieve the value.

this.userservice.passwordreset(this.email)
.subscribe(
      res => {
         alert.setTitle('Email sent');
         alert.setSubTitle('Please follow email instructions to reset password')
      },
      err => {
          console.log('Error', err),
          alert.setTitle('Failed')
      }
);

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

Angular 4 encounters a hiccup when a mistake in the XHR request brings a halt to a

In my Angular 4 application, I have implemented an observable that monitors an input field. When it detects a URL being entered, it triggers a service to make an XHR request. Observable.fromEvent(this._elementRef.nativeElement, 'input') .debou ...

Angular - Sharing data between components with response value

I am currently in the process of restructuring my project, focusing on establishing communication between unrelated components while also waiting for a return value from a function call. Imagine having component1 with function1() and component2 with funct ...

The connection between Cognito identity and Mqtt is not possible within AWS IoT Core

The application is built using Angular. Upon logging in with Cognito, the application retrieves the user's CognitoUser data, including id token, access key, and session token. Next, the application connects to Iot Core to subscribe to or publish data ...

Top method for managing dates in TypeScript interfaces received from the server

After encountering the issue detailed in Dates in a Typescript interface are actually strings when inspected I faced a challenge while defining a TypeScript interface for a response from a server API, particularly with a Date parameter. The data arrived a ...

Implement Angular in a non-conventional Angular-based venture

Is there a way to incorporate Angular into a project that is built on a different framework? Specifically, I have a .NET MVC project that uses Razor for the markup. I want to make some ajax calls and update parts of the UI without using JQuery. Instead, I ...

Tips for avoiding the push method from replacing my items within an array?

Currently, I am diving into Typescript and VueJS, where I encountered an issue with pushing elements to my array. It seems to constantly override the 'name' property. Let me share the code snippet causing this problem: const itemsSelectedOptions ...

Bidirectional data binding in Angular 2 for the class attribute

Utilizing twitter bootstrap tabs, I aim to monitor the application of the active class on the li tag as users switch between different tabs. My objective is to control tab activation through custom buttons by modifying the class attribute to activate direc ...

Error: JavaScript object array failing to import properly

In my code, I have an array of objects named trace which is defined as follows: export const trace: IStackTrace[] = [ { ordered_globals: ["c"], stdout: "", func_name: "<module>", stack_to_render: [], globals: { c: ["REF" ...

Troubleshooting Vue and Typescript: Understanding why my computed property is not refreshing the view

I'm struggling to understand why my computed property isn't updating the view as expected. The computed property is meant to calculate the total price of my items by combining their individual prices, but it's only showing me the initial pri ...

When utilizing JavaScript syntax and performing API testing with Postman

Hello, I need some assistance from experts in connecting to Postman using the JavaScript code provided below. When running nodemon, the connection appears to be normal with no errors. Also, the GET request sent to Postman works fine. However, I am encounte ...

Attempting to locate a method to update information post-editing or deletion in angular

Are there any methods similar to notifyDataSetChange() in Android Studio, or functions with similar capabilities? ...

The function cannot be called on a type that does not have a callable signature. The specified type, 'number | Dispatch<SetStateAction<number>>', does not have any compatible call signatures

Currently, I am working on setting up state to be passed through context in React using hooks. However, when I attempt to use the dispatched state updater function, an error is thrown: Cannot invoke an expression whose type lacks a call signature. Type &a ...

Typescript compiler still processing lib files despite setting 'skipLibCheck' to true

Currently, I am working on a project that involves a monorepo with two workspaces (api and frontEnd). Recently, there was an upgrade from Node V10 to V16, and the migration process is almost complete. While I am able to run it locally, I am facing issues w ...

Discovering Child Elements in Angular 2 with @ViewChild and CSS Selectors

I'm looking to update the style of the second paragraph using either the nth-child() selector or by a specific class: import { Component, ViewChild } from '@angular/core'; @Component({ selector: 'my-app', template: ` <d ...

Incorporate Lodash into your Angular2 project within Visual Studio 2015

I've been attempting to incorporate the lodash dependency into my project, but I keep encountering issues during the VS2015 build process. The error message in the build output states "Build: Cannot find module 'lodash'", causing the build t ...

Setting base URLs for production and development in Angular 6: A step-by-step guide

As a beginner in Angular, I am looking for a way to set different base URLs for production and development environments. I aim to dynamically configure the base URL to avoid hard-coding it in the index.html file every time I switch between these two enviro ...

In Javascript, check if an item exists by comparing it to null

I am working with a dropdown list that can be used for various types of data. Some of the data includes an isActive flag (a BOOLEAN) while others do not. When the flag is absent, I would like to display the dropdown item in black. However, if the flag exis ...

The property "state" of RouteComponentProps location does not exist in the provided type {}

We recently encountered a new error that was not present before. Previously, our code compiled without any issues and the compilation process went smoothly. However, individuals who installed the react application from scratch are now facing an error speci ...

Is it possible to verify if the @Output is correctly wired up within an Angular component?

When working with Angular and TypeScript, it is possible to access the bound @Input values in the ngOnInit method of a component. However, there isn't a straightforward way to check if a particular @Output event binding has been set up on the componen ...

Mapping JSON to interface in Angular 7: A step-by-step guide

I am currently working with angular7 and I have a requirement to map a json object to my interface. My goal is to create a function that can accurately map the fields of the json object to the corresponding properties in the interface. Additionally, if the ...