angular call component function from outside

Question

I have a problem with my angular project, I need to call a function that is inside the export class of my component. But I need to call it from a other TypeScript file, that is not a component. The function need to be inside the export class, because it shows a MatSnackBar. The function setLoggedInStatusAndName is called from my Typescript file, that is not a component. You can see my code below:

import { Component, OnInit } from '@angular/core';
import {InitAirConsole, MessageClass, SendMessageToScreen} from "../../../airconsole/airconsoleService";
import {MatSnackBar} from "@angular/material/snack-bar";
let playerName = "";
let isLoggedIn = false;
let isLeader = false;
let gameStartable = false;
let loginButtonText = "Login";
@Component({
  selector: 'app-login-form',
  templateUrl: './login-form.component.html',
  styleUrls: ['./login-form.component.scss']
})



export class LoginFormComponent {
  constructor(private snackBar: MatSnackBar) { //
    InitAirConsole();
  }
  get playerName(){
    return playerName;
  }
  set playerName(value:string){
    playerName = value;
  }
  get loggedIn(){
    return isLoggedIn;
  }
  get loginButtonText(){
    return loginButtonText;
  }
  get gameStartable(){
    return gameStartable;
  }
  sendNameOrStartGame() {
    if(gameStartable){
      //start the game
    }else{
      if(playerName !== ""){
        setLoggedInStatusAndName(true,false, playerName);
        SendMessageToScreen({
          'messageClass': MessageClass.LOGIN,
          'name': playerName
        })
      }else{
        this.openRedSnackBar("You need to enter a name!", 5);
      }

    }
  }
  openRedSnackBar(message:string, durationInSeconds:number){
    this.snackBar.open(message, '', {
      duration: durationInSeconds * 1000,
      panelClass: ['red-snackbar']

    })
  }

}


export function setLoggedInStatusAndName(loggedIn:boolean,leader:boolean,name:string){
  isLoggedIn = loggedIn;
  playerName = name;
  isLeader = leader;
    if(isLeader && isLoggedIn){
      loginButtonText = "Minimum amount of players is 2, currently there is just you!";
    }else if(!isLoggedIn){
      loginButtonText = "Login";
      //somehow I need to call the openSnackBar methode inside the export function here 
      //something like: openRedSnackBar("You could not be logged in, maybe your chosen name is already in use", 5);
    }else{
      loginButtonText = "Waiting for game leader to start the game";
    }
}

export function setPlayerAmount(newPlayerAmount:number){
  if(isLeader && isLoggedIn){
    if(newPlayerAmount > 1){
      loginButtonText = "To start the game click here!";
      gameStartable = true;
    }else{
      loginButtonText = "Minimum amount of players is 2, currently there is just you!";
      gameStartable = false;
    }
  }
}

Answer 1

There are hacks from which you can do that. But that's not recommended as the business logic should be separated from the view.

Consider creating a service like AlertService that can have the methods like-

openRedSnackBar(message:string, durationInSeconds:number){
    this.snackBar.open(message, '', {
        duration: durationInSeconds * 1000,
        panelClass: ['red-snackbar']
    })
}

or other methods like openFooBar().

Then you should have another service like UserAuthService or UserStateService which should have method like-

setLoggedInStatusAndName(loggedIn:boolean, leader:boolean, name:string) {
  isLoggedIn = loggedIn;
  playerName = name;
  isLeader = leader;
    if(isLeader && isLoggedIn){
      loginButtonText = "Minimum amount of players is 2, currently there is just you!";
    }else if(!isLoggedIn){
      loginButtonText = "Login";
      this.alertService.openSnackBar();
    }else{
      loginButtonText = "Waiting for game leader to start the game";
    }
}