My query parameters are not being detected

Question

I am trying to write an Angular app that loads a different login page based on the "groupId" that I set in the URL. The idea is to send each client a URL that contains a particular "groupId" as a parameter. A template is used to load the page where the page's text and pictures are pulled from the firebase repo using that specific company's groupId.

I tried using query params as follows:

(In my component):

  ngOnInit() {
    console.log('test');

    console.log(this.activeRoute.queryParams);
     this.activeRoute.queryParams
    .subscribe(params => {
      this.groupId = params.groupId;
   })
   console.log(this.groupId);
   if (this.groupId === undefined) {
    this.router.navigate(['/login/locked']);
   }
  }

(and my routes in the parent component):

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent,
    children: [
      {
        path: '', component: SignInComponent,
      },
      {
        path: 'signup', component: SignUpComponent,
      },
      {
        path: 'locked', component: LockScreenComponent,
      },
      {
        path: 'password-rest', component: PasswordResetComponent,
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AuthPagesRoutingModule { }

However, I keep on getting an undefined from the console.log(this.groupId) when I paste www.example.com/login?groupId=FACEBOOK235 into the search bar (and thereby navigating me to the locked screen).

Am I missing something?

CrackkiiCrazy · Accepted Answer · 2022-04-21 10:57:56Z

1

because your if condition is outside subscribe the queryParams observables is asyncronous. your code should be :-

ngOnInit() {
    console.log('test');

    console.log(this.activeRoute.queryParams);
     this.activeRoute.queryParams
    .subscribe(params => {
      this.groupId = params.groupId;
      console.log(this.groupId);
      if (this.groupId === undefined) {
       this.router.navigate(['/login/locked']);
      }
   })
  }

(EDIT) When I log the complete parameter list I get:

closed: false
destination: BehaviorSubject {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}
hasError: false
isStopped: false
observers: []
operator: MapOperator {thisArg: undefined, project: ƒ}
source: BehaviorSubject {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}
thrownError: null
_isScalar: false
[[Prototype]]: Subject
complete: ƒ complete()
constructor: class AnonymousSubject
error: ƒ error(err)
next: ƒ next(value)
_subscribe: ƒ _subscribe(subscriber)
[[Prototype]]: Observable
asObservable: ƒ asObservable()
complete: ƒ complete()
constructor: class Subject
error: ƒ error(err)
lift: ƒ lift(operator)
next: ƒ next(value)
unsubscribe: ƒ unsubscribe()
_subscribe: ƒ _subscribe(subscriber)
_trySubscribe: ƒ _trySubscribe(subscriber)
Symbol(rxSubscriber): ƒ [_internal_symbol_rxSubscriber__WEBPACK_IMPORTED_MODULE_2__.rxSubscriber]()
[[Prototype]]: Object

edited Apr 21, 2022 at 10:57

CrackkiiCrazy

131 silver badge6 bronze badges

answered Apr 19, 2022 at 17:50

Aakash Garg

11k2 gold badges11 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

rozpuszczalny Over a year ago

Just a correction, this particular observable is asynchronous, but not all observables are asynchronous - some may be synchronous.

Aakash Garg Over a year ago

observables can never be syncronous, their callback will always be asyncronous, thats the whole reason we define a callback.

rozpuszczalny Over a year ago

Disagree, please check out this simple code on codesandbox (make sure to open the console): codesandbox.io/s/synchronous-rxjs-qjfs0k?file=/src/index.ts But I agree that one should never relay on this behavior.

Aakash Garg Over a year ago

ok let me edit the answer. thanks for adding to my knowledge. i read more here :- christianlydemann.com/are-observables-async

CrackkiiCrazy Over a year ago

@AakashGarg I tried your solution but it still sends back undefined... any other suggestions?

|

Barış Can Yılmaz · Accepted Answer · 2022-04-19 17:52:16Z

1

You subscribe an observable and they are asynchronous and your if condition outside the subscribe method so when you access your groupId propery you get undefined. you should access it in subscribe method.

ngOnInit() {
     this.activeRoute.queryParams
    .subscribe(params => {
      this.groupId = params.groupId;
      console.log(this.groupId);
      if (this.groupId === undefined) {
         this.router.navigate(['/login/locked']);
      }

   })   
  }

answered Apr 19, 2022 at 17:52

Barış Can Yılmaz

73510 silver badges23 bronze badges

Comments

rozpuszczalny · Accepted Answer · 2022-04-19 17:51:21Z

0

Call to this.activeRoute.queryParams.subscribe is not synchronous, therefore console.log keeps reporting undefined. Add this check inside subscribe, like so:

this.activeRoute.queryParams
 .subscribe(params => {
   this.groupId = params.groupId;
   console.log(this.groupId);
   if (this.groupId === undefined) {
     this.router.navigate(['/login/locked']);
   }
})

Also, you may like to check Guards - that's something you might need: https://angular.io/guide/router-tutorial-toh#milestone-5-route-guards . By adding CanActivate guard which returns true or URL tree, you'll achieve what you want.

answered Apr 19, 2022 at 17:51

rozpuszczalny

986 bronze badges

Collectives™ on Stack Overflow

My query parameters are not being detected

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related