metismenu
metismenu copied to clipboard
MetisMenu Angular 2 - not working on first load
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...
This worked for me
first declare jquery after your imports declare var jQuery:any;
replace this:
(
with this: jQuery('#side-menu').metisMenu();
Thanks kabayan @robertdelacruz1551. jQuery('#side-menu').metisMenu() worked for me.
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()
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 - 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"
@fir3pho3nixx sorry i haven't solve the problem yet. I dropped it
@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 {
}
}
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
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!