shankytiwari / ng-material-multilevel-menu Goto Github PK

How do i navigate to another route? How do I need to make the link in config array working. I am getting below errors:

core.js:12301 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'item-1-1'

ERROR TypeError: Cannot read property 'navigateByUrl' of undefined

Hi!

I need to know on a click if this is a Label or an Item.

I've seen the two methods.
(selectedItem)="selectedItem($event)"
(selectedLabel)="selectedLabel($event)"
but Ive mine on a click and this is when i need to know where i am on the tree.
(click)="toogleSidebar()"
Thx !

Do not have the option to put external link? Out of application

i want my tab pre-selected when i reload the page or directly comes to this route in angular 7. Currently it is working on onClick method. Can you please add this feature in future updates?

Hello,

Just a quick question about how (selectedItem) works, I can't figure it myself. My appItems array has a special field with a special value I want to send to a service when the link is clicked. I tried to add a onSelect property to my object without success.

Could you please give me some advice ?

Thanks a lot,

Does it work with Angular 7?

HI. I'm getting pointed above error with initial setup. I'm on Angular 8.0.1, Angular Material 8.0.1 installed.

Routing also doesn't work, due to the issue, I guess.

The root cause of the issue is, Route change was never detected because NgIf removed the element from the DOM tree. Basically, this menu detects the route change on NavigationEnd instance of Angular Route.
By the time NgIf displays the menus, NavigationEnd event never happens for the Menu, beacuse it is alreday passed.
While I fix the issue, I have a solution, Please ngClass instead of NgIf.

Can you please add support for SVG ICONS in menu item. like below.

<mat-icon svgIcon="ic-my-icon-name"></mat-icon>

Hey bro,

[Sorry for my bad English]
Can you add RouterLinkActive="class-active-name" property to RouterLink.
So we can custom the Acitve Link.
Example:

And then,
we can edit "acitve-class":
.active-class{
border-left: 4px solid red;
}

https://angular.io/api/router/RouterLinkActive

Sorry for my bad English
Thanks

Been using the package for a short while with Angular 7 and I can't find any issues with it except the warnings rendered.

warning " > [email protected]" has incorrect peer dependency "@angular/common@^6.0.0-rc.0 || ^6.0.0".
warning " > [email protected]" has incorrect peer dependency "@angular/core@^6.0.0-rc.0 || ^6.0.0".

I would like to translate the menu using ngx-translate.
When user changes language I need to reload the menu or replace it's labels.
Is there a way to replace labels or update items?

Hi
When i use yarn to add the module:
yarn add --save ng-material-multilevel-menu

I get this error:
yarn add v1.13.0 error Missing list of packages to add to your project. info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

how do you remove the mat-divider

Currently on collapse complete side nav visibility is hidden.
Can I show only the Icons on collapse?

Hi,

Could you please let me know where can I find the code for the demo examples in the below link ?

http://plugins.codershood.info/#/plugins/ngmm-plugin

Hi, I wan to translate using ngx-translate/core.
The way i know to use ngx-translate in the following way.

<h1>{{ 'demo.title' | translate }}</h1>

<!-- translation: directive (key as attribute)-->
<p [translate]="'demo.text'"></p>

<!-- translation: directive (key as content of element) -->
<p translate>demo.text</p>

https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular8-app-with-ngx-translate

How do i use it in
appItems = [
{
label:'Employee' ,
icon: 'person_outline',
link: 'hrm/employee',
}]

It would be much better,if you have an option for setting an custom image as Icon.

It will be nice to able to drag and resize the menu width.

Do you have any forecast of when there will be an option for internationalization?

i have this probleme i add NO-SCHEMMA But Noting please help
Uncaught Error: Template parse errors:
Can't bind to 'configuration' since it isn't a known property of 'ng-material-multilevel-menu'.

1. If 'configuration' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
   

I created a menu that is having links with spaces . When there are no special characters (%20) my route is always highlighted in the menu, but when the route contains a space it is not highlighting the right item in the menu.

Currently this package has only (selectedItem)="selectedItem($event)
It would be great to have (selectedLabel)="selectedLabel($event) also.
Because sometimes I'd like to know which Menu Category has been selected thanks to that I could display all its subcategories. Can you add it, please?

I get what I need except disabled and different classes feature for nested angular material menu Is it possible to do that or suggest me any other angular material nested menu

What I need:

I need to disable some menus for specific users, it's done by either class or disabled attribute

Its a good feature although and of very common use.

Thank's for my last question answer, i have another one

Hi,

I'm getting the below warning when running the project with gulp in Angular 7.1.1. Please update the dependencies.

npm WARN [email protected] requires a peer of @angular/common@^6.0.0-rc.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@^6.0.0-rc.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.

Please guide me if there any way i can show or hide menu based on permission or any kind of condition.

I think it might be a good idea to view the items as if they were displayed in a hierarchical tree.

Thanks for Component!

label: 'Item 1 (with Font awesome icon)'
but i only show Item 1 ( With

if i put mouse over the text the full text should show as hover text or similar.

Hi,
I am using your ng-material-multilevel-menu for a MEAN stack project that I am doing.
It works properly and I would like to thank you for that!

However, I would like to know if there was an option or a way to display all the items when initialized instead of clicking on it ?

Thank you,
Regards,

The color of the selected item does not appear in my application like your example. I believe that may be some conflict with some other component. Is there any class that can be modified to force the color change when an item is selected?

Hi,

I see interfaceWithRoute doesn't work when there are query params in the url. Please let me know if I can achieve this in some other way.

Thanks,
Pradeep

I tried twice to open http://plugins.codershood.info/#/plugins/ngmm-plugin

My Chrome browser says:

This site can’t be reached
plugins.codershood.info took too long to respond.

Hi,

Can not get border-top-style and border-whidth and border-top-color of component mat-divider?

I've tried these ways:

.```
mat-divider {
    border-top-width: 0px! important;
    border-top-style: none! important;
}

and

.mat-divider.mat-divder-inset {
    border-top-width: 0px! important;
    border-top-style: none! important;
}

Also it is not possible to modify the pointer cursor?

.class-custom {
    cursor: pointer
}

Is it also not possible to use routelink?

Thank you.

Hi,

I am looking to make the menu items smaller for both the icon and the text. Is there any way to do this easily? I try to override your styles but none of it seems to take.

Do you have any suggestions on doing this?

There's an issue where if you define a route with 'redirect'. the route is recognized by angular, but the menu item isn't responding as you would expect.

so if my route object is this:

const routes = [
  {
    path: 'aa', component: ComponentParentComponent, children: [
      { path: '', redirectTo: '/aa/a', pathMatch: 'full' },
      { path: 'a', component: ComponentAComponent },
      { path: 'b', component: ComponentBComponent }
    ]
  }
]

and i navigate to

localhost:4200/#/aa

the route is changed to /#/aa/a by the angular router, though the corresponding menu item, isn't being activated and expanded accordingly.

bug can be seen here : Stackblitz Demo

Due to my hectic schedule, I can't dedicate to much time to this package. If someone can contribute and write Test cases for this package, then that would be very helpful.
Thanks,

Hi,

Any option for Menu selection by default, when enter the page?

For example when i enter in web site home page viewed.. at the same time home menu need to go selected state.

Reference to this issue
https://stackoverflow.com/questions/50358473/how-can-i-get-angular-material-icon-to-show-the-outline-in-my-angular-app

i can not use https://material.io/tools/icons/?style=outline
icon
like this one
https://material.io/tools/icons/?search=home&icon=home&style=outline

{
label: 'Home',
link: '/home',
icon: 'home_outline'
},

do not work

When I use Json files for menu data... if I click any menu all item get active state...

Also I want to know how any menu select by default without click the menu item.

Could you please remove this log?
After navigating a while in my page and opening the console, I've seen it full of this log

I think it's because of this log:

If <app-business-menu> is used inside <mat-card> then styles (gray lines) seems to be broken.

However I noticed that If i remove position: relative here:

Then it looks ok, but gray effect whilst clicking on record doesn't work properly.

Can you fix it or give me temporary workaround for this?

Hi! Thank you for this great library! I found it very intuitive and effective.

But I have a particular need.
I want to do custom styling on the list items when mouse over event if fired.

So I tryed to sec my custom class name in my component, and then setting the :hover css modifier, but nothing seems to happen.
I'm new about angular and probably I'm doing something wrong.
Thanks for support.

my sidenav-menu.component.ts file:

config = {
  paddingAtStart: true,
  interfaceWithRoute: true,
  classname: 'side-nav-menu',
  rtlLayout: false
};

sidenav-menu.component.css file:

.side-nav-menu .mat-list-item:hover {
  background: dodgerblue;
}

I want that when one is dropped others should collapse. something similar to https://keenthemes.com/metronic/preview/angular/default/.

I can't find code examples for your demo, it would be amazing if you could help me.

Are there any minimum requirements for this module? I'm getting the error below, maybe its because I'm using Angular 5?

Error:

WARNING in ./node_modules/ng-material-multilevel-menu/fesm5/ng-material-multilevel-menu.js
142:63-79 "export 'defineInjectable' was not found in '@angular/core'

Below is my setup:

"dependencies": {
    "@angular/animations": "^5.2.5",
    "@angular/cdk": "^5.2.5",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/material": "^5.2.5",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/platform-server": "^5.2.0",
    "@angular/router": "^5.2.0",
    "@aspnet/signalr": "^1.0.0",
    "@fortawesome/angular-fontawesome": "^0.1.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.2",
    "@fortawesome/free-brands-svg-icons": "^5.2.0",
    "@fortawesome/free-regular-svg-icons": "^5.2.0",
    "@fortawesome/free-solid-svg-icons": "^5.2.0",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.5",
    "@ngx-translate/core": "^8.0.0",
    "@ngx-translate/http-loader": "^2.0.0",
    "@types/node": "^6.0.115",
    "angular-2-dropdown-multiselect": "1.6.3",
    "angular-oauth2-oidc": "^2.1.8",
    "angular-tree-component": "^7.0.2",
    "angular2-jwt": "^0.2.3",
    "bootstrap": "4.0.0-beta.2",
    "bootstrap-sass": "^3.3.7",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.4.1",
    "countup.js-angular2": "^1.1.1",
    "datatables.net-dt": "^1.10.19",
    "file-saver": "^1.3.3",
    "hammerjs": "^2.0.8",
    "intl": "^1.2.5",
    "jquery": "^3.3.1",
    "jquery-ui": "^1.12.1",
    "jshint": "^2.9.5",
    "metismenu": "^2.7.0",
    "ng-material-multilevel-menu": "^4.0.4",
    "ngx-cookie-service": "^1.0.9",
    "ngx-perfect-scrollbar": "^4.6.4",
    "ngx-scrollbar": "2.1.0",
    "pace-js": "^1.0.2",
    "popper.js": "^1.12.5",
    "primeicons": "^1.0.0-beta.10",
    "primeng": "^5.2.7",
    "rxjs": "^6.2.2",
    "rxjs-compat": "^6.2.2",
    "signalr": "^2.3.0",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "~1.7.3",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/jquery": "^2.0.48",
    "@types/node": "~6.0.60",
    "bootstrap-sass": "^3.3.7",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }

Update: ng -v gives below

Angular CLI: 1.7.4
Node: 8.11.3
OS: win32 x64
Angular: 5.2.11
... common, compiler, compiler-cli, core, forms, http
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

@angular/animations: 5.2.5
@angular/cdk: 5.2.5
@angular/cli: 1.7.4
@angular/material: 5.2.5
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

Hi, I'm using your menu to navigate throught different pages, but I want to make a last entry to sign out. Is there any way to call a function that performs the logout when I click?

Hello,
If i want to highlight selected menu.

For instance company is clicked. i want different background for companay menu.
How to do that?