All authentication logic in Angular encapsulated within the service

I am considering moving all the business logic into the auth service and simply calling the method on the component side. Since none of my functions return anything, I wonder if it's okay or if they will hang.

COMPONENT

  credentials: Credentials = {
    email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d6d7c7e686f7c6f68797c737478715d7a707c74">[email protected]</a>',
    password: '123'
  }

  onLogIn(): void {
    this.authService.logIn(this.credentials.email, this.credentials.password);
  }

SERVICE

  public logIn(email: string, password: string): void {
    this.http.post<any>('http://localhost:3100/login', { email, password })
      .subscribe(user => {
        localStorage.setItem('TOKEN', user.token)
        this.router.navigateByUrl('/home');
      });
  }

Answer №1

There is no need for your service methods to return anything as it will not cause any delay. The HttpClient in Angular utilizes RxJs, which allows for asynchronous code execution.

You have the option to subscribe within the component or return the Subscription, providing more control over cancellation if needed.

If you choose to subscribe in your component, you can utilize the tap operator to access the desired data.

Any of these approaches are valid ways to structure your code effectively.

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

Leveraging the power of Angular 5 to seamlessly integrate two distinct components on

I am exploring a way to render an additional component on the current page instead of navigating to a new one. Here is my setup: <button mat-button color="primary" [routerLink]="['/tripspath', trip.tripId]" style="cursor: pointer">View Rou ...

What steps are involved in constructing Jodit from scratch?

Seeking a non-minified, readable version of Jodit, I attempted to build it myself. However, my lack of experience with composer, node, npm, webpack, TypeScript, and other tools has left me struggling. Is there anyone who can guide me through the process s ...

Angular has a built-in function to determine the next ID after deletion of some items

I am currently facing a situation where I have a list of contacts in a detailed view and navigating through them using the following code: <nav> <a [routerLink]="['/details', friend.id - 1 ]" *ngIf="!(friend.id == 1)"> P ...

Testing an Angular component with @Input through unit testing

I am dealing with an angular component that utilizes an @input attribute and processes it in the ngOnInit. When writing unit tests for @inputs, I usually set the value using component.inputproperty=value. However, in this case, I cannot do so due to the ...

Dealing with client-side exceptions in a Next.js 13 application's directory error handling

After carefully following the provided instructions on error handling in the Routing: Error Handling documentation, I have successfully implemented both error.tsx and global-error.tsx components in nested routes as well as the root app directory. However, ...

Having trouble updating state with useEffect in a React functional component

Currently, I am dealing with a React functional component that is calling an API to fetch data. The response from the API call is confirmed to be received successfully. My aim is to store this data in an array within the component's state so that it c ...

Angular component equipped with knowledge of event emitter output

I have a custom button component: @Component({ selector: "custom-submit-button" template: ` <button (click)="submitClick.emit()" [disabled]="isDisabled"> <ng-content></ng-content> </butto ...

Most effective method for converting a table of data to TypeScript

Searching for an effective method to map a table of enum (or interface) data to the correct location. For instance, Smoke Sensor - Push Button can only be linked to SS - PI SYMBOL and Smoke Sensor - PushButton can only be associated with 000 - TTT PARAMET ...

Access-Control-Allow-Methods does not allow the use of Method PUT in the preflight response, as stated by Firebase Cloud Functions

I am facing an issue with my Firebase cloud function endpoint. I have a setup where it forwards PUT requests to another API endpoint. I have configured the following Access-Control-Allow- headers: // src/middlewares/enableCORS.ts export default function en ...

What is the process for upgrading TypeScript to the newest version using npm?

My current TypeScript version on my machine is 1.0.3.0 and I am looking to upgrade it to the latest version, which is 2.0. Could someone please guide me on how to accomplish this using npm? ...

Create a function in JavaScript that is able to accept a variable number of objects as arguments

I have a good grasp of how to pass infinite parameters in a function in JavaScript. But what about accepting any number of objects as parameters in a function? This is my current implementation: function merge<T>(objA: T, objB: T){ return Object. ...

Can you provide an example of a valid [routerLink] for a relative auxiliary route?

Suppose I have the following route configuration: { path: 'contact', component: ContactComponent, children: [ { path: ':id', component: ContactDetailComponent }, { path: 'chat', component: ContactChatComponent, outlet ...

Using TypeScript, effortlessly retrieve objects within React components based on their keys

I am looking for a way to dynamically choose a React component based on a key within an object import React, {useState, useEffect} from 'react' import ComponentA from '@components/ComponentA'; import ComponentB from '@components/Co ...

Is it possible to include HTML elements like <href> in Vue data?

My collection of data strings looks something like this: data(){ return(){ {name:"example", title:"exampleTitle", desc:"exampleDescription exampleDescription ....."}, {name:"example2", title:"example2Title", desc:"exampleDescripti ...

What is the best way to showcase a collection of inherited objects in Angular?

How can I efficiently display a list of various objects that inherit from the same abstract class in an Angular application? What is considered optimal practice for accomplishing this task? Consider the following basic model: abstract class Vehicle { ...

Creating a HTML element that functions as a text input using a div

I am encountering an issue with using a div as text input where the cursor flashes at the beginning of the string on a second attempt to edit the field. However, during the initial attempt, it does allow me to type from left to right. Another problem I am ...

Unable to proceed with deployment due to the absence of the 'category' property in the '{}' type

Everything seems to be functioning properly - I can add and remove products, all with the properties I specified in the database. However, my deployment for production is being hindered by some errors that I'm encountering. ERROR in src\app&bsol ...

Can we specify a more specific type for an argument in Typescript based on another argument in a function?

I'm in the process of developing a compact DSL for filter operations and crafting helper methods to support it. Suppose I have a function const equals = (left, right) => {} This function needs to be typed so that the left value is a field within ...

Designing a popup using Angular, CSS, and Javascript that is capable of escaping the limitations of its parent div

I'm currently working on an Angular project that involves components nested within other components. My goal is to create a popup component that maintains the same size and position, regardless of where it's triggered from. One suggestion I rece ...

A comprehensive guide on using HttpClient in Angular

After following the tutorial on the angular site (https://angular.io/guide/http), I'm facing difficulties in achieving my desired outcome due to an error that seems unclear to me. I've stored my text file in the assets folder and created a config ...