how do i select a menu based on whether user is logged in or not in angular app

Question

I have created 2 side drawer menus in angular app which display on different pages within the angular app. Menu 2 includes more links which are displayed when the user logs in. However, if you click on the homepage in the side menu after logging in (which has menu 1 without the logged in extras currently) it logs out and reverts back to the standard menu.

How do I select the menu that displays on each page depending on whether the user is logged in or not? Not everyone will be logging into this app, in fact vast majority wont log in, hence I don't want the homepage to be the login screen.

Any ideas would be hugely welcome! Not sure if you need to see any code I have written but if so just let me know what is relevant. Many thanks

code implemented is:

authentication.service.ts

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Storage } from '@ionic/storage';
import { ToastController, Platform } from '@ionic/angular';
import { BehaviorSubject } from 'rxjs';
import { User } from '../../app/services/user';
import { HttpClient } from '@angular/common/http';
import { LoadingController } from '@ionic/angular';


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

public isLoggedIn = false;

app.component.ts

constructor(public authentication: AuthenticationService) {}

app.component.html





   
    
      Menu
    
  
  
    
      
        
          
          
            {{p.title}}
          
        
      
    
  







  
    
      Menu
    
  
  
    
      
        
          
          
            {{p.title}}

the menu works for when loading the app but when I login, the menu for when logged out still shows, have I done something wrong above? Many thanks

user_13566566 · Answer

you can do this by using the angular directive NgIf. For example:

Create a service component, called account.service.ts and store a variable called isLoggedIn. Make sure to change this variable depending on whether the user has logged in or not. Run the command: ng g s services/account to generate the service.

account.service.ts

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

@Injectable({
  providedIn: "root"
})
public export AccountService {
    public isLoggedIn = false;
}

In your menu component page, inject the service through the constructor

menu.component.ts:

constructor(public account: AccountService) {}

Now, in your menu HTML page, do the following:

HTML


    // Your nav bar when the user is logged in.


    // Your nav bar when the user is not logged in.

NOTE: Make sure to import CommonModules to use the NgIf directive.

user_639035 · Answer

Based on you question, you already have a logic how you know if a user is logged in or not. You can use this logic to display two different menus for logged in and not logged in users. A simple ngIf will do the trick. (I assume that the homepage is not the same for logged in and not logged in users).

how do i select a menu based on whether user is logged in or not in angular app

2 Answers