metismenu icon indicating copy to clipboard operation
metismenu copied to clipboard

MetisMenu Angular 2 - not working on first load

Open uvarajthulasiram opened this issue 8 years ago • 9 comments

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...

uvarajthulasiram avatar Oct 22 '16 07:10 uvarajthulasiram

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();

robertdelacruz1551 avatar Nov 20 '16 03:11 robertdelacruz1551

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

ricthethird20 avatar Feb 06 '17 02:02 ricthethird20

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()

watchakorn avatar Mar 11 '17 09:03 watchakorn

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

BlankHrt avatar Apr 19 '17 13:04 BlankHrt

@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"

ghost avatar Sep 08 '17 11:09 ghost

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

BlankHrt avatar Sep 08 '17 12:09 BlankHrt

@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 {
	}
}

ghost avatar Sep 08 '17 13:09 ghost

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

BlankHrt avatar Sep 08 '17 13:09 BlankHrt

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!

emylyano3 avatar Jun 09 '19 17:06 emylyano3