How to use this variable in my service? (Angular 10)

Question

I want to be able to use the variable "selectedRole" from my login component in my authentication service. This is my login.component.ts code:

import { Component, ElementRef, Input, OnInit, ViewChild, NgModule } from '@angular/core';
import {NgForm} from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { Router } from '@angular/router';
import {MatRadioModule} from '@angular/material/radio';
import { stringify } from 'querystring';
import {BrowserModule} from '@angular/platform-browser';
import { AuthenticationService } from "../authentication.service";

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})

export class LoginComponent implements OnInit {
  constructor(private router: Router, private authenticationService: AuthenticationService) { }

  ngOnInit(): void {
  }

  selectedRole='User';

  userID = '';
  password = '';
  
  RoleSelection(role){
    this.selectedRole = role;
  }
  Login(){
    
    if(this.selectedRole === 'User'){
      this.router.navigate(['/userpage']);
    }
    else{
      this.router.navigate(['/adminpage'])
    }
    
  }

}

And this is my athentication service:

import { Injectable } from '@angular/core';
import { SignInData } from 'src/SignInData';
@Injectable({
  providedIn: 'root'
})
export class AuthenticationService {

  private readonly mockedUser = new SignInData('user1', '123');
  private readonly mockedAdmin = new SignInData('admin1', '456');
  isAuthenticated = false;

  constructor() { }
  Authenticate(SignInData: SignInData): boolean {
    if(this.CheckLoginDetails(SignInData)){
      this.isAuthenticated = true;
      return true;
    }
    this.isAuthenticated = false;
    return false;
  }

  private CheckLoginDetails(SignInData: SignInData): boolean {
    return this.CheckUserID(SignInData.getUserID()) && this.CheckPassword(SignInData.getPassword());
  }

  private CheckUserID(userID: string): boolean {
      return userID === this.mockedAdmin.getUserID();
  }

  private CheckPassword(password: string): boolean {
    return password === this.mockedAdmin.getUserID();
  }

}

in the CheckUserID() and CheckPassword() I want to implement a condtion, saying: if selectedRole === 'User' or if selectedRole === 'Admin', but this requires me to somehow import the selectedRole from the login component. I tried with the rxjs but it didn't work.

Answer 1

Just add selectedRole property to AuthenticationService class and set it from component.

import { Injectable } from '@angular/core';
import { SignInData } from 'src/SignInData';

@Injectable({
    providedIn: 'root'
})
export class AuthenticationService {

    public selectedRole = 'User';

    private readonly mockedUser = new SignInData('user1', '123');
    private readonly mockedAdmin = new SignInData('admin1', '456');
    isAuthenticated = false;

    constructor() { }
    Authenticate(SignInData: SignInData): boolean {
        if (this.CheckLoginDetails(SignInData)) {
            this.isAuthenticated = true;
            return true;
        }
        this.isAuthenticated = false;
        return false;
    }

    private CheckLoginDetails(SignInData: SignInData): boolean {
        return this.CheckUserID(SignInData.getUserID()) && this.CheckPassword(SignInData.getPassword());
    }

    private CheckUserID(userID: string): boolean {
        if (this.selectedRole === 'User') {

        }
        else if (this.selectedRole === 'Admin') {

        }
        return userID === this.mockedAdmin.getUserID();
    }

    private CheckPassword(password: string): boolean {
        if (this.selectedRole === 'User') {

        }
        else if (this.selectedRole === 'Admin') {

        }
        return password === this.mockedAdmin.getUserID();
    }
}

and set it from component

RoleSelection(role){
    this.authenticationService.selectedRole = role;
    this.selectedRole = role;
}