Get updates on a new subscription for Angular by signing up now

I have a method for authentication that is kept private. Additionally, I have a public method named login which is utilized in my components to carry out the actual login process. I am interested in subscribing to the login method, which internally subscribes to the private authentication method. This will allow me to display loading messages and handle errors uniquely based on different views. Is this achievable?

This is the Authentication method:

private userAuthenticate( email: string, password: string ) {
    return this.httpPost(`${this.baseApiUrl}/auth?format=json&provider=login`, {userName: email, password: password}).subscribe(
        res     => this.saveJwt(res.bearerToken),
        err     => this.logError(err),
        ()      => console.log("Authentication done.")
    );
}

This is the Login method:

login( email: string, password: string ) {
    this.logout();
    return this.userAuthenticate(email, password);
}

I aim to subscribe to the login method to manage loaders and error messages accordingly. I appreciate any assistance.

Answer №1

Don't try to enroll in Subscription (generated by subscribe()). Instead, subscribe to Observable.

If you want an Observable, use map() instead of subscribe(). Then the function calling login() can handle the subscription.

private userAuthenticate( email: string, password: string ) {
    return this.httpPost(
             `${this.baseApiUrl}/auth?format=json&provider=login`, 
             {userName: email, password: password}
           )
           .map(res => this.saveJwt(res.bearerToken));
}

For any additional callbacks needed, consider using the catch and finally operators.

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

What is the purpose of importing a module in app.module.ts? And what specifically happens when importing classes one by one in the

I am interested in creating an Angular form, but I have a question about why we import 'ReactiveFormsModule' in app.module. Additionally, I am curious as to why we need to explicitly import classes like FormControl and FormGroup again in the temp ...

The functionality of Angular/Typescript class.name appears to fail during a production build

Using Angular 5, I encountered an unusual problem with the class.name property. We have a TypeScript function as shown below: export class ApiService { public list<T>(c: new(values: Object)=> T) { var cname = c.name; .... } } When ...

The Typescript code manages to compile despite the potential issue with the type

In my coding example, I have created a Try type to represent results. The Failure type encompasses all possible failures, with 'Incorrect' not being one of them. Despite this, I have included Incorrect as a potential Failure. type Attempt<T, ...

Incorrect errors are displayed by VS Code in ts-node shell scripts

I came across an interesting article discussing running a TypeScript file on the command line, and while it seems to be functioning properly, I am encountering invalid errors in VS Code: https://i.sstatic.net/eis3X.png As seen in the terminal (bottom hal ...

Reasons Why Optional Chaining is Not Utilized in Transpiling a Node.js + TypeScript Application with Babel

Currently, I am delving into Babel in order to gain a deeper understanding of its functionality. To facilitate this process, I have developed a basic API using Node.js and TypeScript. Upon transpiling the code and initiating the server, everything operates ...

Choose between using Angular with either PHP and Python or with Django and Python in PHP

For my graduation project, I have developed the frontend using Angular and created a machine learning system with Python. Now, I need to integrate these two components by writing a Web API for Angular using Django, even though I have no prior experience wi ...

Can a type be created that resolves to either of two specific types?

If I have multiple functions that return either a number or a date, is there a way to define a type that encompasses both? For example, instead of: foo1(): number | Date {} foo2(): number | Date {} Can we do something like this: foo1(): NumberOrDate {} f ...

Setting up Angular 2 for ASP.NET MVC: A Step-by-Step Guide

angular.io provides a setup guide for asp.net core at: https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html. However, I am trying to configure it for an asp.net mvc application. The Quick Start files are already present in the asp.net mvc te ...

What is the best way to retrieve an item from an array?

I have an array containing multiple records and I need to extract just one record from it using its id as an object. However, the result I'm getting is an array with that single record. Is there a way to resolve this issue? Result: [{…}] 0: {id ...

Distinguishing between type assertion of a returned value and defining the return type of a function

What distinguishes between performing a type assertion on a function's return value and explicitly typing the return value in the function signature? Let's consider only simple functions with a single return statement. interface Foo { foo: numbe ...

A step-by-step guide on setting up a database connection with .env in typeorm

I encountered an issue while attempting to establish a connection with the database using ormconfig.js and configuring .env files. The error message I received was: Error: connect ECONNREFUSED 127.0.0.1:3000 at TCPConnectWrap.afterConnect [as oncomplete] ( ...

The translation of popups using ngx-translate in Javascript is not functioning properly

When I click on my request, the content "Are you sure?" is not changing to the required language. This issue is located in list.component.html <button type="button" (click)="myrequest(item.Id)">Request View</button> The fu ...

Trouble encountered when using RxJS zip and pipe together

In my Angular Resolver, I am facing a scenario where I need to wait for two server calls. The catch is that the second server call is optional and can be skipped based on user input. This data retrieval process is crucial for loading the next page seamless ...

Achieving the highest ranking for Kendo chart series item labels

Currently, I am working with a Kendo column chart that has multiple series per category. My goal is to position Kendo chart series item labels on top regardless of their value. By default, these labels are placed at the end of each chart item, appearing o ...

Show mistakes using source mapping (TypeScript combined with Node/Express)

In my Docker container, I have a node instance running express. Whenever I intentionally cause an error in my simple app.ts file, like below: // Start listening for requests app.listen(3000, () => { console.log('Application Service starting!&ap ...

Leveraging ArangoJS Driver within an Angular2 web platform

Currently, I am in the process of working on a project that involves Angular2 and Typescript (v1.8.10). Our aim is to incorporate data from an ArangoDB database into the web application. Ideally, I would like to utilize the arangojs driver for this task. H ...

Executing Typescript build process in VSCode on Windows 10 using Windows Subsystem for Linux

My configuration for VSCode (workspace settings in my case) is set up to utilize bash as the primary terminal: { "terminal.integrated.shell.windows": "C:\\WINDOWS\\Sysnative\\bash.exe" } This setup allo ...

Addressing base-href duplication in subfolders when building with Angular 4

When deploying builds of my Angular app to an S3 bucket, I organize them into different subdirectories based on the branch name. The URLs follow this pattern: pr.example.com/add-cool-spinner pr.example.com/increase-awesomeness If I use --base-href /add-c ...

The NavBar element is failing to update when the state changes

I have been working on developing a shopping cart feature. As I implemented a context and passed the state as a value to increment and decrement buttons in the cart, everything seemed to be functioning well with item counts adjusting accordingly. However, ...

What is the correct way to type this object conversion?

I'm trying to ensure type safety for a specific converting scenario. The goal is to map over the palette object and convert any entries to key-value pairs, similar to how tailwindcss handles color configurations. However, I am facing an issue where th ...