MetisMenu Angular 2 - not working on first load

[uvarajthulasiram]

metisMenu not working on initial or first load. After refresh it works fine,

My app.component.ts looks like this,

/// <reference path="../typings/globals/jquery/index.d.ts" />;

import { Router } from '@angular/router';
import { Component, OnInit, AfterViewInit } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'app-tag',
    templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit, AfterViewInit {
    constructor(private _router: Router) {
    }

    ngOnInit(): void {
    }

    ngAfterViewInit() {
        (<any>$('#side-menu')).metisMenu();
    }
}

My menu items looks like this,

                    <li>
                        <a href="#"><i class="fa fa-volume-control-phone fa-fw"></i> Heading1<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li><a [routerLink]="['/h1c1']">H1-Child1</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-users fa-fw"></i> Heading 2<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li><a [routerLink]="['/h2c1']">H2-Child1</a></li>
                        </ul>
                    </li>

I'm not getting any error. All the menu items are expanded by default on the first load. When I click on the head item, the page gets refreshed and all the menu items are collapsed and everything works fine from then on...

[robertdelacruz1551]

This worked for me

first declare jquery after your imports declare var jQuery:any;

replace this: ($('#side-menu')).metisMenu();

with this: jQuery('#side-menu').metisMenu();

[ricthethird20]

Thanks kabayan @robertdelacruz1551. jQuery('#side-menu').metisMenu() worked for me.

[watchakorn]

Thank you.

I'm adapted from

declare var jQuery:any; jQuery('#side-menu').metisMenu();

to

after import declare var $:any;

call statement $('#side-menu').metisMenu()

[BlankHrt]

i met the similar problem. when i define menu=[...] and use ngFor ,its ok. but when i define it in subscribe ,it not work and expand all what's the problem

[ghost]

@BlankHrt - I appear to be having the same problem. In my case the error is:

ERROR TypeError: a(...).parent(...).toggleClass(...).children(...).collapse is not a function

I am using Angular: "@angular/core": "4.1.2"

[BlankHrt]

@fir3pho3nixx sorry i haven't solve the problem yet. I dropped it

[ghost]

@BlankHrt - Me neither. In the end I built a vanilla Angular 4 component:

Dependencies:

"@angular/core": "4.1.2",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.4"

Component:

<div class="navbar-default sidebar" role="navigation">
    <div class="sidebar-nav navbar-collapse">
        <ul class="nav" id="side-menu">
            <li *ngFor="let menu of menuDefinition">
                <!-- Top level menu -->
                <a href="{{menu.href}}"
                   *ngIf="!menu.children || menu.children.length == 0">
                    <i class="fa {{menu.icon}}"></i>{{menu.text}}
                </a>
                <!-- Top level menu with children -->
                <a href="{{menu.href}}"
                   *ngIf="menu.children && menu.children.length > 0"
                   (click)="menu.expanded=!menu.expanded;false;"
                   [attr.aria-expanded]="menu.expanded"
                   aria-controls="{{menu.childMenuId}}">
                    <i class="fa {{menu.icon}}"></i>{{menu.text}}
                    <span [ngClass]="{'fa-rotate-270': menu.expanded}" class="fa arrow fa-rotate-270"></span>
                    <ul id="{{menu.childMenuId}}"
                        [ngbCollapse]="!menu.expanded"
                        class="nav nav-second-level">
                        <li *ngFor="let childMenu of menu.children">
                            <a href="{{childMenu.href}}">{{childMenu.text}}</a>
                        </li>
                    </ul>
                </a>
            </li>
        </ul>
    </div>
</div>

import {
    Component,
    AfterViewInit
} from '@angular/core';

@Component({
    selector: 'navigation',
    templateUrl: './navigation.component.html',
    styleUrls: ['./navigation.component.css']
})
export class NavigationComponent implements AfterViewInit {

    menuDefinition: Array<any> = [{
        text: 'Dashboard',
        icon: 'fa-dashboard fa-fw',
        href: '#'
    }, {
        text: 'Charts',
        icon: 'fa-bar-chart-o fa-fw',
        href: '#',
        expanded: true,
        childMenuId: 'chartsLinks',
        children: [{
            text: 'Flot Charts',
            href: '#'
        }, {
            text: 'Morris.js Charts',
            href: '#'
        }]
    }, {
        text: 'Tables',
        icon: 'fa-table fa-fw',
        href: '#'
    }, {
        text: 'Forms',
        icon: 'fa-edit fa-fw',
        href: '#'
    }, {
        text: 'UI Elements',
        icon: 'fa-wrench fa-fw',
        href: '#',
        expanded: true,
        childMenuId: 'uiLinks',
        children: [{
            text: 'Panels and Wells',
            href: '#'
        }, {
            text: 'Buttons',
            href: '#'
        }, {
            text: 'Notifications',
            href: '#'
        }, {
            text: 'Typography',
            href: '#'
        }, {
            text: 'Icons',
            href: '#'
        }, {
            text: 'Grid',
            href: '#'
        }]
    }];

    ngAfterViewInit(): void {
    }
}

[BlankHrt]

You can choose another menu or write your own menu . May be we can make a friend ,this is my twitter.Nice to meet you. https://twitter.com/LiuLewUU @fir3pho3nixx

[emylyano3]

Thank you.

I'm adapted from

declare var jQuery:any; jQuery('#side-menu').metisMenu();

to

after import declare var $:any; call statement $('#side-menu').metisMenu()

Worked for me to!