p-menubar highlight parent when children are clicked

UI Components for Angular
Post Reply
csliston
Posts: 2
Joined: 20 Feb 2019, 21:41

04 Mar 2019, 15:45

Hi,
I am using p-menubar for my navigation. I like the highlight when clicking on the parent node but when you click on a child it looks like nothing is select because all of the parents are not highlighted. How can I make the parent highlight when the child is selection. In this case Data highlighted when Protocol Data is selected.

Code: Select all

<p-menubar [model]="items" [style]="{'margin-left': '310px', 'padding-top': '10px', 'height' : '65px', 'border' : '0', 'border-radius': '0px'}">
    <button pButton label="Logout" icon="pi pi-fw pi-sign-out"></button>
</p-menubar>

this.items = [
    {
    label: 'Home',
    icon: 'pi pi-fw pi-home',
    routerLink': ['/home']
    },
    {
    label: 'Login',
    icon: 'pi pi-fw pi-sign-in',
    visible: !this.app.authenticated,
    'routerLink': ['/login'],
    },
    {
    label: 'Data',
    icon: 'fa fa-database',
    'routerLink': ['/data'],
    items: [ {label: 'Protocol Data', 'routerLink': ['/dataProtocol']} ]
    },
    {
    label: 'Reports',
    icon: 'fa fa-table',
    'routerLink': ['/reports']
    }
];

yigitfindikli
Posts: 314
Joined: 08 Aug 2018, 14:09

05 Mar 2019, 08:53

csliston wrote:
04 Mar 2019, 21:09
Hi,
I would like to have the root node of the menu highlight alone with the submenu. That way when the menus are collapse you know which menu group you are in. So if I click on Protocol Data I would like both Data and Protocol Data to be highlighted, is this possible?

Code: Select all

navbar-component.html
<p-menubar [model]="items" [style]="{'margin-left': '310px', 'padding-top': '10px', 'height' : '65px', 'border' : '0', 'border-radius': '0px'}">
    <button pButton label="Logout" icon="fa fa-sign-out"></button>
</p-menubar>

navbar-component.ts
this.items = [
    {
        label: 'Home',
        icon: 'fa fa-home',
        'routerLink': ['/home']
    },
    {
        label: 'Login',
        icon: 'fa fa-sign-in',
        visible: !this.app.authenticated,
        'routerLink': ['/login'],
    },
    {
        label: 'Data',
        icon: 'fa fa-database',
         'routerLink': ['/data'],
        items: [
        {label: 'Protocol Data', 'routerLink': ['/dataProtocol']}
    ]
    },
    {
        label: 'Reports',
        icon: 'fa fa-table',
        'routerLink': ['/reports']
    }
];
        
app.module.ts
const routes: Routes = [
    { path: '', pathMatch: 'full', redirectTo: 'home' },
    { path: 'home', component: HomeComponent },
    { path: 'login', component: LoginComponent },
    { path: 'data', component: DataHomeComponent },
    { path: 'dataProtocol', component: DataProtocolComponent },
    { path: 'reports', component: ReportsComponent }
    // , { path: 'reportsforecast', component: ReportsForecastComponent }
];

        
Hi,
I am not sure, maybe you can use routerLinkActiveOptions {exact:true} like that;

Code: Select all

const routes: Routes = [
    { path: '', pathMatch: 'full', redirectTo: 'home', routerLinkActiveOptions: {exact:true} },
    { path: 'home', component: HomeComponent, routerLinkActiveOptions: {exact:true} },
    { path: 'login', component: LoginComponent, routerLinkActiveOptions: {exact:true}},
    { path: 'data', component: DataHomeComponent, routerLinkActiveOptions: {exact:true}},
    { path: 'dataProtocol', component: DataProtocolComponent, routerLinkActiveOptions: {exact:true} },
    { path: 'reports', component: ReportsComponent, routerLinkActiveOptions: {exact:true}}
    // , { path: 'reportsforecast', component: ReportsForecastComponent, routerLinkActiveOptions: {exact:true}}
];
Best Regards.

ireneusz.budzowski
Posts: 6
Joined: 22 May 2018, 15:05

10 Jul 2019, 11:28

Make use of routerLink and routerLinkActiveOptions is a great idea.
But what to do, if the parent shouldn't have routerLink? Can we disable somehow route update?

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests