p-menubar highlight root when submenu is clicked

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

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 }
];

        

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

05 Mar 2019, 08:51

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.

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests