The data type 'Promise<string>' cannot be assigned to type 'string'

Is there a way to insert a variable response from a service and then show it on hover? Here is my attempt:

toolTip: string;

async mouseover(params) {
    this.handle = setTimeout(() => {
        this.toolTip = this.checkSaldo(10, 'FRA');
        this.show = true;
    }, 4000);

}

checkSaldo(amount: any, currencyCode: any): Promise<string> {
    return new Promise((resolve) => {
        this.restService.getByParam('recalculatedSaldo', { amount: amount, currency: currencyCode }).subscribe(response => {
            resolve(response.payload);
        });
    })

}

However, I encountered an error with the toolTip variable:

Type 'Promise' is not assignable to type 'string'

Any suggestions to resolve this issue?

Answer №1

It is not possible to directly assign a Promise to a string field.

Instead, you should wait for the Promise callback to complete and then assign the value like this:

this.checkSaldo(10, 'FRA').then((result) => {
    this.toolTip = result;
    ...
});

Check out a Sample StackBlitz Demo

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

Adding Components Dynamically to Angular Parent Dashboard: A Step-by-Step Guide

I have a dynamic dashboard of cards that I created using the ng generate @angular/material:material-dashboard command. The cards in the dashboard are structured like this: <div class="grid-container"> <h1 class="mat-h1">Dashboard</h1> ...

Navigating through an interface array using *ngFor in TypeScript

After successfully implementing an interface to retrieve data from a service class, I encountered an issue when attempting to iterate through the FilteredSubject interface array. Despite using console.log, I was unable to achieve the desired outcome. You ...

Steps for displaying a new event on a fullCalendar

Utilizing fullCalendar to display a list of events in the following manner: this.appointments = [{ title: "Appointment 1", date: "2020-09-06", allDay: false }, { title: "Appointment 2", date: "2020 ...

Please ensure that the function chain has appropriate parameter and return types by specifying the tuple type

Can a new type be created for the given tuple/array that has certain validation constraints? The following array is considered valid: const funcs = [(a: string) => 1, (a: number) => 'A', (a: string) => 2] However, this one is invalid ...

Encountering a NgForm provider error in Angular 4.4.6 development mode

UPDATE: Identifying the root of the issue has led me to search for a suitable solution. NOTE: This complication is specific to development mode (not production, and not utilizing AOT). The "Update" resolution I am implementing can be found here. In an a ...

There seems to be an issue with gulp as it is not functioning properly and the version information is

Currently, I am working on a project and have made the decision to utilize gulp for watching and transpiling Typescript files. Below are the steps I followed to set everything up: All of these actions were performed within the main directory of my projec ...

What is the process for generating a component using an imported module?

My application utilizes a modal service that has the capability to open a modal dialog dynamically. The signature of this function is create<T>(component: Type<T>, params?: Object, module: Type<{}> = AppModule): Observable<ComponentRef ...

Utilizing Angular 2+ with the [innerHTML] property to incorporate HTML with added style attributes

I am currently utilizing Angular 2+ [innerHTML] input for inserting HTML formatting that includes style tags. Within my template, the code looks like this: <span [innerHTML]="someVar"></span> In the component file, I have defined: someVar = ...

Ensure to verify the slot for any included content to see if it is vacant

I'm currently facing a dilemma without a clear solution in sight. I have created some custom components that utilize content projection and multi slot transclusion. For instance, I have a Card (Bootstrap) and I want to customize elements like the he ...

Content not being displayed by component when utilizing lazy loading

I've encountered an issue with sharing components in modules within Angular 8. I attempted to create a stackblitz demo, but I hit a roadblock along the way. It's unclear whether the problem lies within Angular itself or if it's specific to t ...

"Issues with Ionicons displaying a 404 error in the latest Ionic

After updating npm today, I noticed that many Ionic icons from ionicons.com were returning a 404 error. I came across a workaround which involved modifying the angular.json file. However, I am concerned about encountering the same issue (and potentially ot ...

What is the best way to use a generic callback function as a specific argument?

TS Playground of the problem function callStringFunction(callback: (s: string) => void) { callback("unknown string inputted by user"); } function callNumberFunction(callback: (n: number) => void) { callback(4); // unknown number inputt ...

Changing an Angular template.html into a PDF document within an Angular 2 application can be achieved by utilizing

Exploring Angular 2 and looking for a way to export my HTML component in Angular 2 to PDF using jspdf. I want to convert dynamically generated tabular HTML into a PDF using jspdf. Below is a snippet of sample code along with a Plunker link: import {Comp ...

Utilizing an object's value as a key for a separate object

Here's an overview of my current object structure: import { imageOne, imageTwo } from "./images"; export const imageKeyMap = { "one": imageOne, "two": imageTwo } The definitions for imageOne and imageTwo ...

What is the reason for the user not being defined in this scenario?

I am struggling to understand why I cannot set the user in the app. Registration and login functionalities are working fine. However, after refreshing the app, the user data is lost while the access token remains intact. Additionally, when attempting to cr ...

The vertical lines separating the buttons are not evenly centered

I need help to center a vertical line between my buttons in the middle of the header. Currently, the line goes up and my disconnect button is not aligned properly. Can you assist me in creating a responsive design? Thank you. https://i.sstatic.net/XIeiQ4E ...

Using dots instead of lines for the carousel indicators in PrimeNG

I'm currently working on a carousel feature, but I want to change the indicators from lines to small dots. I know the solution lies within the CSS files, but I'm not sure how to implement it. I think I need to create a new CSS class, but I could ...

Trigger a method from a different component when an event occurs in a specific component in Angular 6

I am currently utilizing Angular 6. Within my application, I have a component called HeaderComponent which includes an input field. The HTML for the HeaderComponent looks like this: <form> <input (keyup)="search($event)"> </form> ...

Tips for preserving images while browsing a website built with Angular single-page application

Utilizing Angular's router for component navigation has been beneficial, but I am facing an issue with component reloads when going back. To address the problem of content reloading from the server, I have implemented a solution where the content arra ...

Using Angular 5 to link date input to form field (reactive approach)

I'm encountering an issue with the input type date. I am trying to bind data from a component. Below is my field: <div class="col-md-6"> <label for="dateOfReport">Data zgłoszenia błędu:</label> <input type="date" formC ...