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!