Activate menu item if url param changes
I have a sidenav that has a dropdown included. In it you could choose a user. Depending on the user, different menu items are available (no problem). If you change the user via dropdown (no matter on which menu item you are), you should be forwarded to the user details page (also working).
Now to the problem: If I am on the detail view for userA (menu item is highlighted) and I change the user to userB, I (correctly) will stay on the details view. The url changes correctly and the view will show details for userB. BUT the menu item isn't highlighted anymore. I tried out a lot, but nothing works so far.
Sidenode: I'd like to change navigation within a service, as I like to add more logic and need to use it in other components as well.
What I have right now (pretty much shortened):
- sidenav.component.html
<mat-list-item>
<div>
<mat-label fxLayout="row">
<span>Selected User</span>
</mat-label>
<mat-select #select placeholder="Select User" (selectionChange)="selectionChange()">
<mat-option *ngFor="let u of user" [value]="u">
{{ u.name }}
</mat-option>
</mat-select>
</div>
</mat-list-item>
<mat-list-item>
<a mat-line [routerLink]="['/user', user.id, 'details']" [routerLinkActive]="['active']">User</a>
</mat-list-item>
// more mat-list-items in here
- sidenav.component.ts
selectionChange(): void {
this.userService.navigate();
}
- user.service.ts
navigate(): void {
this.router.navigate(['/user/' + this.user.id + '/details']);
}
- app-routing.module.ts
const appRoutes: Routes = [
{
path: '',
component: MyAppComponent,
children: [
{
path: 'user',
loadChildren: './user/user.module#UserModule',
},
{
path: 'user/:userID/details',
loadChildren: './user-details/user-details.module#UserDetailsModule',
},
],
}
];
Does anyone have an idea how to keep menu item activated, if only the parameter in the url changes? I'm using Angular6.
Thank you in advance.
EDIT: For clarification the sidenav in the end looks like this:
User Dropdown (with UserA and UserB)
Details
Projects
[More Menu Items]
I want to have Details highlighted when I'm on this view
angular angular6 angular-router asked Nov 27 '18 at 12:59
continicontini
113
|
show 5 more comments
I have a sidenav that has a dropdown included. In it you could choose a user. Depending on the user, different menu items are available (no problem). If you change the user via dropdown (no matter on which menu item you are), you should be forwarded to the user details page (also working).
Now to the problem: If I am on the detail view for userA (menu item is highlighted) and I change the user to userB, I (correctly) will stay on the details view. The url changes correctly and the view will show details for userB. BUT the menu item isn't highlighted anymore. I tried out a lot, but nothing works so far.
Sidenode: I'd like to change navigation within a service, as I like to add more logic and need to use it in other components as well.
What I have right now (pretty much shortened):
- sidenav.component.html
<mat-list-item>
<div>
<mat-label fxLayout="row">
<span>Selected User</span>
</mat-label>
<mat-select #select placeholder="Select User" (selectionChange)="selectionChange()">
<mat-option *ngFor="let u of user" [value]="u">
{{ u.name }}
</mat-option>
</mat-select>
</div>
</mat-list-item>
<mat-list-item>
<a mat-line [routerLink]="['/user', user.id, 'details']" [routerLinkActive]="['active']">User</a>
</mat-list-item>
// more mat-list-items in here
- sidenav.component.ts
selectionChange(): void {
this.userService.navigate();
}
- user.service.ts
navigate(): void {
this.router.navigate(['/user/' + this.user.id + '/details']);
}
- app-routing.module.ts
const appRoutes: Routes = [
{
path: '',
component: MyAppComponent,
children: [
{
path: 'user',
loadChildren: './user/user.module#UserModule',
},
{
path: 'user/:userID/details',
loadChildren: './user-details/user-details.module#UserDetailsModule',
},
],
}
];
Does anyone have an idea how to keep menu item activated, if only the parameter in the url changes? I'm using Angular6.
Thank you in advance.
EDIT: For clarification the sidenav in the end looks like this:
User Dropdown (with UserA and UserB)
Details
Projects
[More Menu Items]
I want to have Details highlighted when I'm on this view
angular angular6 angular-router asked Nov 27 '18 at 12:59
continicontini
113
Your component which displays detail view should subscribe to ActivatedRoute. You obtain the userId and set what user you're actually viewing details for, all you have to do is set the userId in the service, and your sidenav component should get the user id from the service. angular.io/api/router/ActivatedRoute
– Florian
Nov 27 '18 at 13:07
you mean like this? in detail viewthis.subscriptions.push(this.route.paramMap.subscribe((m) => { this.userID = m.get('userID'); }));
– contini
Nov 27 '18 at 13:31
in sidenav I already get the user from the service.
– contini
Nov 27 '18 at 13:34
1
With your ngStyle suggestion I only style my dropdown, right? But I want to style the selected menu item, sorry if this was unclear. I have a dropdown with all users and outside of the dropdown I have different menu items likeDetails,Projects,...When I'm on e.g. the Projects page and I call the Details page viarouter.navigate()the menu itemDetailgets highlighted. If I'm already onDetailsthe highlighing disappears. :/
– contini
Nov 27 '18 at 14:33
1
Silly me! I already use behavioursubject's for the selected user, thank you for remembering me to also use it for the menu items :+1: works!
– contini
Nov 27 '18 at 15:12
|
show 5 more comments
I have a sidenav that has a dropdown included. In it you could choose a user. Depending on the user, different menu items are available (no problem). If you change the user via dropdown (no matter on which menu item you are), you should be forwarded to the user details page (also working).
Now to the problem: If I am on the detail view for userA (menu item is highlighted) and I change the user to userB, I (correctly) will stay on the details view. The url changes correctly and the view will show details for userB. BUT the menu item isn't highlighted anymore. I tried out a lot, but nothing works so far.
Sidenode: I'd like to change navigation within a service, as I like to add more logic and need to use it in other components as well.
What I have right now (pretty much shortened):
- sidenav.component.html
<mat-list-item>
<div>
<mat-label fxLayout="row">
<span>Selected User</span>
</mat-label>
<mat-select #select placeholder="Select User" (selectionChange)="selectionChange()">
<mat-option *ngFor="let u of user" [value]="u">
{{ u.name }}
</mat-option>
</mat-select>
</div>
</mat-list-item>
<mat-list-item>
<a mat-line [routerLink]="['/user', user.id, 'details']" [routerLinkActive]="['active']">User</a>
</mat-list-item>
// more mat-list-items in here
- sidenav.component.ts
selectionChange(): void {
this.userService.navigate();
}
- user.service.ts
navigate(): void {
this.router.navigate(['/user/' + this.user.id + '/details']);
}
- app-routing.module.ts
const appRoutes: Routes = [
{
path: '',
component: MyAppComponent,
children: [
{
path: 'user',
loadChildren: './user/user.module#UserModule',
},
{
path: 'user/:userID/details',
loadChildren: './user-details/user-details.module#UserDetailsModule',
},
],
}
];
Does anyone have an idea how to keep menu item activated, if only the parameter in the url changes? I'm using Angular6.
Thank you in advance.
EDIT: For clarification the sidenav in the end looks like this:
User Dropdown (with UserA and UserB)
Details
Projects
[More Menu Items]
I want to have Details highlighted when I'm on this view
angular angular6 angular-router asked Nov 27 '18 at 12:59
continicontini
113
I have a sidenav that has a dropdown included. In it you could choose a user. Depending on the user, different menu items are available (no problem). If you change the user via dropdown (no matter on which menu item you are), you should be forwarded to the user details page (also working).
Now to the problem: If I am on the detail view for userA (menu item is highlighted) and I change the user to userB, I (correctly) will stay on the details view. The url changes correctly and the view will show details for userB. BUT the menu item isn't highlighted anymore. I tried out a lot, but nothing works so far.
Sidenode: I'd like to change navigation within a service, as I like to add more logic and need to use it in other components as well.
What I have right now (pretty much shortened):
- sidenav.component.html
<mat-list-item>
<div>
<mat-label fxLayout="row">
<span>Selected User</span>
</mat-label>
<mat-select #select placeholder="Select User" (selectionChange)="selectionChange()">
<mat-option *ngFor="let u of user" [value]="u">
{{ u.name }}
</mat-option>
</mat-select>
</div>
</mat-list-item>
<mat-list-item>
<a mat-line [routerLink]="['/user', user.id, 'details']" [routerLinkActive]="['active']">User</a>
</mat-list-item>
// more mat-list-items in here
- sidenav.component.ts
selectionChange(): void {
this.userService.navigate();
}
- user.service.ts
navigate(): void {
this.router.navigate(['/user/' + this.user.id + '/details']);
}
- app-routing.module.ts
const appRoutes: Routes = [
{
path: '',
component: MyAppComponent,
children: [
{
path: 'user',
loadChildren: './user/user.module#UserModule',
},
{
path: 'user/:userID/details',
loadChildren: './user-details/user-details.module#UserDetailsModule',
},
],
}
];
Does anyone have an idea how to keep menu item activated, if only the parameter in the url changes? I'm using Angular6.
Thank you in advance.
EDIT: For clarification the sidenav in the end looks like this:
User Dropdown (with UserA and UserB)
Details
Projects
[More Menu Items]
I want to have Details highlighted when I'm on this view
angular angular6 angular-router angular angular6 angular-router asked Nov 27 '18 at 12:59
continicontini
113
asked Nov 27 '18 at 12:59
continicontini
113
edited Nov 27 '18 at 14:36
contini
asked Nov 27 '18 at 12:59
continicontini
113
asked Nov 27 '18 at 12:59
continicontini
113
asked Nov 27 '18 at 12:59
continicontini
113
113
Your component which displays detail view should subscribe to ActivatedRoute. You obtain the userId and set what user you're actually viewing details for, all you have to do is set the userId in the service, and your sidenav component should get the user id from the service. angular.io/api/router/ActivatedRoute
– Florian
Nov 27 '18 at 13:07
you mean like this? in detail viewthis.subscriptions.push(this.route.paramMap.subscribe((m) => { this.userID = m.get('userID'); }));
– contini
Nov 27 '18 at 13:31
in sidenav I already get the user from the service.
– contini
Nov 27 '18 at 13:34
1
With your ngStyle suggestion I only style my dropdown, right? But I want to style the selected menu item, sorry if this was unclear. I have a dropdown with all users and outside of the dropdown I have different menu items likeDetails,Projects,...When I'm on e.g. the Projects page and I call the Details page viarouter.navigate()the menu itemDetailgets highlighted. If I'm already onDetailsthe highlighing disappears. :/
– contini
Nov 27 '18 at 14:33
1
Silly me! I already use behavioursubject's for the selected user, thank you for remembering me to also use it for the menu items :+1: works!
– contini
Nov 27 '18 at 15:12
|
show 5 more comments
Your component which displays detail view should subscribe to ActivatedRoute. You obtain the userId and set what user you're actually viewing details for, all you have to do is set the userId in the service, and your sidenav component should get the user id from the service. angular.io/api/router/ActivatedRoute
– Florian
Nov 27 '18 at 13:07
you mean like this? in detail viewthis.subscriptions.push(this.route.paramMap.subscribe((m) => { this.userID = m.get('userID'); }));
– contini
Nov 27 '18 at 13:31
in sidenav I already get the user from the service.
– contini
Nov 27 '18 at 13:34
1
With your ngStyle suggestion I only style my dropdown, right? But I want to style the selected menu item, sorry if this was unclear. I have a dropdown with all users and outside of the dropdown I have different menu items likeDetails,Projects,...When I'm on e.g. the Projects page and I call the Details page viarouter.navigate()the menu itemDetailgets highlighted. If I'm already onDetailsthe highlighing disappears. :/
– contini
Nov 27 '18 at 14:33
1
Silly me! I already use behavioursubject's for the selected user, thank you for remembering me to also use it for the menu items :+1: works!
– contini
Nov 27 '18 at 15:12
Your component which displays detail view should subscribe to ActivatedRoute. You obtain the userId and set what user you're actually viewing details for, all you have to do is set the userId in the service, and your sidenav component should get the user id from the service. angular.io/api/router/ActivatedRoute
– Florian
Nov 27 '18 at 13:07
Your component which displays detail view should subscribe to ActivatedRoute. You obtain the userId and set what user you're actually viewing details for, all you have to do is set the userId in the service, and your sidenav component should get the user id from the service. angular.io/api/router/ActivatedRoute
– Florian
Nov 27 '18 at 13:07
you mean like this? in detail view
this.subscriptions.push(this.route.paramMap.subscribe((m) => { this.userID = m.get('userID'); }));– contini
Nov 27 '18 at 13:31
you mean like this? in detail view
this.subscriptions.push(this.route.paramMap.subscribe((m) => { this.userID = m.get('userID'); }));– contini
Nov 27 '18 at 13:31
in sidenav I already get the user from the service.
– contini
Nov 27 '18 at 13:34
in sidenav I already get the user from the service.
– contini
Nov 27 '18 at 13:34
1
1
With your ngStyle suggestion I only style my dropdown, right? But I want to style the selected menu item, sorry if this was unclear. I have a dropdown with all users and outside of the dropdown I have different menu items like
Details, Projects, ... When I'm on e.g. the Projects page and I call the Details page via router.navigate() the menu item Detail gets highlighted. If I'm already on Details the highlighing disappears. :/– contini
Nov 27 '18 at 14:33
With your ngStyle suggestion I only style my dropdown, right? But I want to style the selected menu item, sorry if this was unclear. I have a dropdown with all users and outside of the dropdown I have different menu items like
Details, Projects, ... When I'm on e.g. the Projects page and I call the Details page via router.navigate() the menu item Detail gets highlighted. If I'm already on Details the highlighing disappears. :/– contini
Nov 27 '18 at 14:33
1
1
Silly me! I already use behavioursubject's for the selected user, thank you for remembering me to also use it for the menu items :+1: works!
– contini
Nov 27 '18 at 15:12
Silly me! I already use behavioursubject's for the selected user, thank you for remembering me to also use it for the menu items :+1: works!
– contini
Nov 27 '18 at 15:12
|
show 5 more comments
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53500306%2factivate-menu-item-if-url-param-changes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53500306%2factivate-menu-item-if-url-param-changes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Your component which displays detail view should subscribe to ActivatedRoute. You obtain the userId and set what user you're actually viewing details for, all you have to do is set the userId in the service, and your sidenav component should get the user id from the service. angular.io/api/router/ActivatedRoute
– Florian
Nov 27 '18 at 13:07
you mean like this? in detail view
this.subscriptions.push(this.route.paramMap.subscribe((m) => { this.userID = m.get('userID'); }));– contini
Nov 27 '18 at 13:31
in sidenav I already get the user from the service.
– contini
Nov 27 '18 at 13:34
1
With your ngStyle suggestion I only style my dropdown, right? But I want to style the selected menu item, sorry if this was unclear. I have a dropdown with all users and outside of the dropdown I have different menu items like
Details,Projects,...When I'm on e.g. the Projects page and I call the Details page viarouter.navigate()the menu itemDetailgets highlighted. If I'm already onDetailsthe highlighing disappears. :/– contini
Nov 27 '18 at 14:33
1
Silly me! I already use behavioursubject's for the selected user, thank you for remembering me to also use it for the menu items :+1: works!
– contini
Nov 27 '18 at 15:12