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.