How to make Angular display error message from api response

In my Angular 12 application, I have this custom error message from the API JSON response from the backend, which displays on POSTMAN whenever there is error:

trait ApiResponse
{
    public function coreResponse($message, $data = [], $statusCode, $isSuccess = true)
    {
        // Check the params
        if(!$message) return response()->json(['message' => 'Message is required'], 500);

        // Send the response
        if($isSuccess) {
            return response()->json([
                'message' => $message,
                'error' => false,
                'code' => $statusCode,
                'results' => $data
            ], $statusCode);
        } else {
            return response()->json([
                'message' => $message,
                'error' => true,
                'code' => $statusCode,
            ], $statusCode);
        }
    }

    public function success($message, $data, $statusCode = 200)
    {
        return $this->coreResponse($message, $data, $statusCode);
    }

    public function error($message, $data, $statusCode = 500)
    {
        return $this->coreResponse($message, null, $statusCode, false);
    }

}

Controller:

use ApiResponse;

public function login(LoginRequest $request)
{
try {
    $confirmUser = User::where('active', 1)->where(function ($query) use($request) {
        $query->where('email', $request->username)->orWhere('mobile_number', $request->username);
    })->whereNull('deleted_at')->first();
    if(!$confirmUser){
        return $this->error('User doesn\'t exist', 404);
    }
    $authenticated = false;
    $remember = $request->remember_me ? true : false;
    if (Auth::attempt(['email' => $request->username, 'password' => $request->password], $remember)) {
        $authenticated = true;
    } elseif (Auth::attempt(['mobile_number' => $request->username, 'password' => $request->password], $remember)) {
        $authenticated = true;
    }
    if ($authenticated == true) {
        $user = Auth::user();
        $tokenResult = $user->createToken('School');
        // User Log
        if(Auth::loginUsingId($user->id))
        {
            $user->update([
                 'last_login_at' => now(),
            ]);
        }
        $res = User::with(['roles'])->find($user->id);
        return $this->success('You have successfully Logged In.', [
            'user'          => $res,
            'access_token'  => $tokenResult->accessToken,
            'token_type' => 'Bearer',
            'expires_at' => Carbon::parse(
                $tokenResult->token->expires_at
            )->toDateTimeString()
        ]);
    } else {
        return $this->error('Invalid User Credential', 401);
    }
    } catch(\Exception $e) {
        Log::error($e);
        return $this->error($e->getMessage(), $e->getCode());
    }
}

failure:

{
    "message": "Authntication fails",
    "error": true,
    "code": 500
}

or

{
  "success": false,
  "message": "Email is Required!",
  "data": []
 }

if this is applied:

return $this->error($e->getMessage(), $e->getCode());

Note: for error data doesn't matter

success:

{
  "message": "You have successfully Logged In.",
  "error": false,
  "code": 200,
  "results": {
      "user": {
          "id": 1,
          "email": "[email protected]",
          "mobile_number": "+01977885544",
          "roles": [
            {
                "id": 1,
                "name": "Teacher",
                "guard_name": "api",
                "created_at": "2021-05-24T07:02:13.000000Z",
                "updated_at": "2021-05-24T07:02:13.000000Z",
                "pivot": {
                    "model_id": 1,
                    "role_id": 1,
                    "model_type": "App\\Models\\User"
                }
            }
         ]
       },
      ],

     "access_token": "something",
     "token_type": "Bearer",
     "expires_at": "2021-07-06 14:26:17"
  }
}

Then in my Angular component I have this:

return this.api.post('auth/user/login', data, headers)
  .pipe(first())
  .subscribe(
    data => {
      this.dataHandler(data);
    },
      err => {
      this.toastr.error(err.message);
    });
 }


dataHandler(data: any){
  this.auth.changeAuthStatus(true);
  this.router.navigateByUrl('/welcome');
  Swal.fire({
  position: 'center',
  icon: 'success',
  title: data.message,
  showConfirmButton: false,
  timer: 10000
 });
}

Whenever there is Successful login, it works. It displays the successful message as in:

title: data.message

That is:

"message": "You have successfully Logged In",

But when there is failure, it's not displaying:

"message": "Authentication fails",

as in:

  err => {
  this.toastr.error(err.message);

But displays Internal Server Error

Then when I changed:

this.toastr.error(err.message)

to

this.toastr.error(err.error.message)

I got this:

ERROR TypeError: Cannot read property 'message' of undefined

How do I make it to display the Custom Error Message:

{
    "message": "User doesn't exist",
    "error": true,
    "code": 500
}