nested subscribe in angular

Question

This is my code..I need to check 2 observable data ..it works for 1 observable How to check another observable

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
import { filter, map, take } from 'rxjs/operators'
import { AuthenticationService } from '../services/authentication.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate  {

  constructor(private authService: AuthenticationService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):  Observable<boolean> | Promise<boolean> | boolean
  {
    
    return this.authService.isAuthenticated.pipe(
      filter(val => val !== null), // Filter out initial Behaviour subject value
      take(1), // Otherwise the Observable doesn't complete!
      map(isAuthenticated => {
        if (isAuthenticated) {  

  TRY 1...........Initial code with direct access without observable but it is not working after login it is not navigate ..if i refresh (f5) then this works
     if( state.url !== '/changepassword'   &&  this.authService.getUserValue.changePassword)
               this.router.navigateByUrl('/changepassword');               
                return true;
----------------------------------------------

         // TRY 2 //Added conditional if 
          -----------------------------------------------------------
           ///i need to subscibe another value and if value is true the route to change 
            password else dashboard should load
           this.authService.getUserValueObs().pipe(
            filter(val => val !== null), // Filter out initial Behaviour subject value
            take(1),
            map(user =>{
                if( state.url !== '/changepassword'   &&  user.changePassword)
                    this.router.navigateByUrl('/changepassword'); 
                }
             ));
            ----------------------------------------------------
           return true;   // i need to retun this value after subscibe of inner observble...
        } else {          
          this.router.navigateByUrl('/')
          return false;
        }
      })
    );
  }
}

Current AuthGuard code works fine but i need to add another condition if subscribed value to instea of dashboard change password page shuld loaded?how to do multiple subscribe methd

EDIT:

This is my auth service class * method..

 export class AuthenticationService {
 
   isAuthenticated: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(null);
 
   userSubject$= new  BehaviorSubject<IAuthenticatedUser>(undefined);

  get getUserValue(): any  {
    return this.userSubject$.value;
  }

  getUserValueObs(): Observable<IAuthenticatedUser>  {
    return this.userSubject$.asObservable();
  }

      login(credentials: {userName:string, password:string}): Observable<any> {
            return this.http.post(`${baseUrl}/authenticate-app`, credentials).pipe(
               map((result: any) => result.data),
               switchMap((user: {userId,userName, fullName refreshToken}) => { 
                if(user)
                    return this.storeUserData(user);
                 }
                  
              }), 
              tap(_ => {
                this.isAuthenticated.next(true);
              })
            )

}

The current isssue is when logged in i am assigning value to both beahaviour subject...but Ispasswordchange some time not getting value..if i refresh then value coming

Answer 1

If you want to switch from one observable to another and use the value from the previous observable, you can use the switchMap operator:

return this.authService.isAuthenticated.pipe(
  filter((val) => val !== null), // Filter out initial Behaviour subject value
  take(1), // Otherwise the Observable doesn't complete!
  switchMap((isAuthenticated) => {
    if (isAuthenticated) {
      return this.authService.getUserValueObs().pipe(
        filter((val) => val !== null), // Filter out initial Behaviour subject value
        take(1),
        map((user) => {
          if (state.url !== "/changepassword" && user.changePassword)
            return this.router.navigateByUrl("/changepassword");
          return true;
        })
      );
    } else {
      return this.router.navigateByUrl("/");
    }
  })
);