0

I have a login component, in it a submit handler method calls a service, subscribes to the observable, and returns the response. The problem is I cannot figure out how to do anything but console log the response, when attempting to do anything useful with the data, I cannot access it. No examples explain how to do anything but console the data returned from a post.

I understand that it is asynchronous, I am just to new to Angular and do not understand the implementation clearly

login-form-component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/auth/auth.service';

@Component({
    selector: 'login-form',
    templateUrl: './login-form.component.html',
    styleUrls: ['./login-form.component.css']
})
    
export class LoginForm implements OnInit {
    
    constructor(
        private auth: AuthService
    ) {
        
    }
    public userName: string;
    public password: string;
    public asyncMsg: any = false;
    public response: object;

    ngOnInit(): void {
    }

    displayErrorMsg() {
        if (this.asyncMsg) {
            return this.asyncMsg;
        }
    }

    public submitHandler() {
        this.auth.postLogin({ username: this.userName, password: this.password })
            .subscribe(res => {
                console.log('res', res)
                return res;
            })

        console.log('this.response',this.response)

    }
    
}

auth.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import config from '../../config';
import { Observable } from 'rxjs';

@Injectable({
    providedIn: 'root'
})

export class AuthService {

    constructor(
        private http: HttpClient,
    ) { }

    postLogin( credentials: object ): Observable<any>{
        return this.http.post(
            `${config.BASE_URL}auth/login`,
            credentials,
            {
                headers: { 'Content-Type': 'application/json' },
                observe: 'response'
            }
        )
    }
    
}

Simply put, I just want to give my component access to the response information.

Bice
  • 1
  • 4

0 Answers0