Search code examples
angularnebular

How to Change AutoCollapse Value true/false in Nebular menu in different Components?

HTML code : 

<nb-menu *ngIf="enableCollapse == true" autoCollapse [items]="menu"></nb-menu>
<nb-menu *ngIf="disableCollapse == true"  [items]="menu"></nb-menu>
<router-outlet></router-outlet>

Component.ts

export class MainComponent { 
    enableCollapse: boolean = true;
    disableCollapse: boolean = false; 
    menu = MENU_ITEMS;
}

In some components, while routing I have to keep AutoCollapse Disabled and in some, it is enabled, So How can I Pass True/false values over here from other components so that in some pages the sidebar menu auto-collapse is enabled in some pages it is disabled. Any help is Appreciated

Solution

  • You can simply pass the true/false value to the autoCollapse property like this:

    <nb-menu autoCollapse="false" [items]="menu"></nb-menu>

    or

    <nb-menu [autoCollapse]="enableCollapse" [items]="menu"></nb-menu>

    As a side note, there is no need in two variables to control the autoCollapse feature, just one flag would be enough.