CODEWITHSUNDEEP
angulartypescript
Abdelhadi Lahlou
Abdelhadi Lahlou

Reputation: 525

Angular 6 returns code of function instead of result

I am wondering how to show or hide my Menu within the authentication of user, for that I created a var of authenticated and a function which changes it's value if connected but when I call the function it returns:

function () { console.log(this.userIsLoggedIn); return this.userIsLoggedIn; }

Instread of the values.

Here you have the code please:

UserService.ts

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

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private userIsLoggedIn;
  constructor() { 
     this.userIsLoggedIn = false;
  }

  setUserIsLoggedIn() {
    this.userIsLoggedIn = true;
  }

  getUserIsLoggedIn(){
    console.log(this.userIsLoggedIn);
    return this.userIsLoggedIn;

  }
}

Menu.ts

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

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {


  constructor(private user : UserService) { }

  ngOnInit() {
  }

  menuIndex = 1;
  accueilClassValue = "nav-item nav-link active";
  proposeClassValue = "nav-item nav-link";
  chercheClassValue = "nav-item nav-link";
  authentucated = this.user.getUserIsLoggedIn;


  ChangeActiveMenu(index : number){
    this.menuIndex = index;

    if (this.menuIndex==1){
      this.accueilClassValue = "nav-item nav-link active";
      this.proposeClassValue = "nav-item nav-link";
      this.chercheClassValue = "nav-item nav-link";
    }
    else if (this.menuIndex==2){
      this.accueilClassValue = "nav-item nav-link";
      this.proposeClassValue = "nav-item nav-link active";
      this.chercheClassValue = "nav-item nav-link";
    }
    else if (this.menuIndex==3){
      this.accueilClassValue = "nav-item nav-link";
      this.proposeClassValue = "nav-item nav-link";
      this.chercheClassValue = "nav-item nav-link active";
    }
  }

}

Menu.html 

{{authentucated}}

Upvotes: 1

Views: 6149

Answers (2)

Junk O Matic
Junk O Matic

Reputation: 21

I think that in the code you´re not showing us you´re doing something like:

getFunction() {
  return this.otherFunction;
}

If that´s the case, you should try:

getFunction() {
  return this.otherFunction();
}

notice the parenthesis. That way javascript will execute the function and return his value, not the function itself

UPDATE: No doubt, you are storing the service´s function getUserIsLoggedIn() without parenthesis, which is the reason you´re storing the function and not his returned value. Change this line:

authentucated = this.user.getUserIsLoggedIn;

for this one:

authentucated = this.user.getUserIsLoggedIn();

Upvotes: 2

mchl18
mchl18

Reputation: 2336

There are spelling errors:

authentucated = this.user.getUserIsLoggedIn;

First this should probably be authenticated. Second, you probably want to call the function:

authenticated = this.user.getUserIsLoggedIn();

Otherwise you are just assigning the value of getUserIsLoggedIn to authenticated, which is a function. You really want the return value though.

Also, what you are doing here:

menuIndex = 1;
accueilClassValue = "nav-item nav-link active";
proposeClassValue = "nav-item nav-link";
chercheClassValue = "nav-item nav-link";
authentucated = this.user.getUserIsLoggedIn;

should probably be in the ngOnInit which you left empty.

menu.ts

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

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {

  public authenticated: boolean;
  public menuIndex: number;
  ...

  constructor(private user : UserService) { }

  ngOnInit() {
    this.menuIndex = 1;
    accueilClassValue = "nav-item nav-link active";
    proposeClassValue = "nav-item nav-link";
    chercheClassValue = "nav-item nav-link";
    authenticated = this.user.getUserIsLoggedIn();
  }


  ChangeActiveMenu(index : number){
    this.menuIndex = index;

    if (this.menuIndex==1){
      this.accueilClassValue = "nav-item nav-link active";
      this.proposeClassValue = "nav-item nav-link";
      this.chercheClassValue = "nav-item nav-link";
    }
    else if (this.menuIndex==2){
      this.accueilClassValue = "nav-item nav-link";
      this.proposeClassValue = "nav-item nav-link active";
      this.chercheClassValue = "nav-item nav-link";
    }
    else if (this.menuIndex==3){
      this.accueilClassValue = "nav-item nav-link";
      this.proposeClassValue = "nav-item nav-link";
      this.chercheClassValue = "nav-item nav-link active";
    }
  }

}

Upvotes: 3

Related Questions