How to keep parent menu open after moving layout to different component

[akinihsan]

Hi,
To show footer, header and menu for only users those who logged in to the system;
I have created a new layout component named SecureComponent and moved all the content of app.component.html to the secure.component.html.
Then, into the app.component.html I wrote <router-outlet> </router-outlet>
I also moved all content of the app.component.ts to the SecureComponent.ts.
I have replaced name of the AppComponent to securecomponent in the components which uses app.component for example (AppMenuComponent uses app.component)
I changed routes. for example: for dashboard

i have seperated the routes for individual modules.
for example: content of app.routes.ts is like that
export const routes: Routes = [
{
path: "dashboard",
component: SecureComponent,
canActivate: [AuthGuard],
children: [{
path: "",
component: DashboardComponent
}],

}
]

content of confugiration-manager.routing.ts is like that

const routes: Routes = [
{
path: "configuration",
component: SecureComponent,
canActivate: [AuthGuard],
children: [
{
path: "management",
component: ManagementMenuComponent,
data: { state: 'management' }
},
{
path: "general",
component: GeneralSettingsComponent,
data: { state: 'general' }
}
]
Normally I except that, after I click a menu item, parent items should keep expanded. For the links in the same modules it works nice, but when i click a link that belongs to different module, it does not work as excepted. parent items seems collapsed. When I expand parent items, child item seems selected.
How can I solve the problem?
There is a method named isActive(i) in the component of menu, I think it has written for detecting activation of parent items.
What can block the normal working of the menu and submenu components?

[yigitfindikli]

Hi,
To show footer, header and menu for only users those who logged in to the system;
I have created a new layout component named SecureComponent and moved all the content of app.component.html to the secure.component.html.
Then, into the app.component.html I wrote <router-outlet> </router-outlet>
I also moved all content of the app.component.ts to the SecureComponent.ts.
I have replaced name of the AppComponent to securecomponent in the components which uses app.component for example (AppMenuComponent uses app.component)
I changed routes. for example: for dashboard

i have seperated the routes for individual modules.
for example: content of app.routes.ts is like that
export const routes: Routes = [
{
path: "dashboard",
component: SecureComponent,
canActivate: [AuthGuard],
children: [{
path: "",
component: DashboardComponent
}],

}
]

content of confugiration-manager.routing.ts is like that

const routes: Routes = [
{
path: "configuration",
component: SecureComponent,
canActivate: [AuthGuard],
children: [
{
path: "management",
component: ManagementMenuComponent,
data: { state: 'management' }
},
{
path: "general",
component: GeneralSettingsComponent,
data: { state: 'general' }
}
]
Normally I except that, after I click a menu item, parent items should keep expanded. For the links in the same modules it works nice, but when i click a link that belongs to different module, it does not work as excepted. parent items seems collapsed. When I expand parent items, child item seems selected.
How can I solve the problem?
There is a method named isActive(i) in the component of menu, I think it has written for detecting activation of parent items.
What can block the normal working of the menu and submenu components?

Hi,
I couldn't replicate the error. Can you share your menu component ?

Best regards.