Creating an Angular application that dynamically loads a different login page based on the "groupId" set in the URL is my current challenge. The approach involves sending each client a unique URL containing a specific "groupId" parameter. A template is then utilized to fetch text and images from the firebase repository using this particular company's groupId.
I initially attempted to use query parameters in the following manner:
(Within 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 the routes within 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 { }
Despite implementing this, I continue to receive an "undefined" result when checking this.groupId
after entering
www.example.com/login?groupId=FACEBOOK235
into the address bar (which leads me to the locked screen). Is there a crucial element I am overlooking?