angularrouterrouterlinkactive

Angular 4 route.navigate expand collapsed menu

My Angular 4 application has a navigation side menu with 2 collapsed items containing submenu items. The routing for the menu works find unless I programmatically route to pages. I can see in the source that the correct menu item is marked active, but it does not expand the menu to show the submenu items.

navigation.componenet.html

<nav class="navbar-default navbar-static-side" role="navigation">
    <div class="sidebar-collapse">
        <ul class="nav metismenu" id="side-menu">

            <li>
                <a [routerLink]="['/home']">
                    <i class="fa fa-home"></i> <span class="nav-label">Home</span>
                    <div class="hidden-lg hidden-md side-menu-phone-text">&nbsp;&nbsp;home</div>
                </a>
            </li>
            <li [routerLinkActive]="['active']">
                <a href="#">
                    <i class="fa fa-heartbeat"></i> <span class="nav-label">Number Pages</span> <span class="fa arrow"></span>
                    <div class="hidden-lg hidden-md side-menu-phone-text">&nbsp;&nbsp;numbers</div>
                </a>
                <ul class="nav nav-second-level collapse"  [routerLinkActive]="['in']">
                    <li [routerLinkActive]="['active']"><a [routerLink]="['/pageone']">Page One</a></li>
                    <li [routerLinkActive]="['active']"><a [routerLink]="['/pagetwo']">Page Two</a></li>
                    <li [routerLinkActive]="['active']"><a [routerLink]="['/pagethree']">Page Three</a></li>
                </ul>
            </li>
            <li [routerLinkActive]="['active']">
                <a href="#">
                    <i class="fa fa-gear"></i> <span class="nav-label">Color Pages</span> <span class="fa arrow"></span>
                    <div class="hidden-lg hidden-md side-menu-phone-text">&nbsp;&nbsp;colors</div>
                </a>
                <ul class="nav nav-second-level collapse"  [routerLinkActive]="['in']">
                    <li [routerLinkActive]="['active']"><a [routerLink]="['/pagered']">Page Red</a></li>
                    <li [routerLinkActive]="['active']"><a [routerLink]="['/pageblue']">Page Blue</a></li>
                    <li [routerLinkActive]="['active']"><a [routerLink]="['/pageblack']">Page Black</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

app.routes.ts

        export const appRoutes: Routes = [
        // Main redirect
        { path: '', redirectTo: 'home', pathMatch: 'full' },
        {
            path: '', component: LayoutComponent,
            children: [
                { path: 'home', component: HomeComponent },

                { path: 'PageOne', component: PageOneComponent },
                { path: 'PageTwo', component: PageTwoComponent },
                { path: 'PageThree', component: PageThreeComponent },

                { path: 'PageRed', component: PageRedComponent },
                { path: 'PageBlue', component: PageBlueComponent },
                { path: 'PageBlack', component: PageBlackComponent },


            ]
        },
        // Handle all other routes
        { path: '**', redirectTo: 'home', pathMatch: 'full' }
    ];

edit: I figured it out. I needed to ad [routerLinkActive]="['in']" to the ul. I updated the code above.

Solution

  • I figured it out. I needed to ad [routerLinkActive]="['in']" to the ul. I updated the code in the question.