ng-material-multilevel-menu not working in Angular 7

Question

I'm using this plugin for a multi-level menu on angular 7. It works fine when doing ng serve, but doesn't work when doing ng build.
Getting this error when building using 'ng build --configuration=dev'.

ERROR in src\app\sidemenu\sidemenu.component.html(8,76): : Property 'selectedItem' does not exist on type 'SidemenuComponent'.
src\app\sidemenu\sidemenu.component.html(8,114): : Property 'selectedLabel' does not exist on type 'SidemenuComponent'.

Also getting the below warning when doing 'npm install'.

npm WARN ng-material-multilevel-menu@4.9.1 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 ng-material-multilevel-menu@4.9.1 requires a peer of @angular/core@^6.0.0-rc.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.

Here is my dev configuration in angular.json

"dev": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.dev.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }

Here is sidemenu.component.html

<mat-nav-list style="padding-top:0px !important;">
    <a mat-list-item (click)="toggleText()">
      <i *ngIf=!showText class="material-icons" aria-label="Show icon only">chevron_right</i>
      <i *ngIf=showText class="material-icons" aria-label="Show icon and text">chevron_left</i>
    </a>
  </mat-nav-list>

  <ng-material-multilevel-menu [configuration]='config' [items]='appitems' (selectedItem)="selectedItem($event)" (selectedLabel)="selectedLabel($event)">
  </ng-material-multilevel-menu>

And here is the ts file. Please advice what am I doing wrong.

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

@Component({
  selector: 'app-sidemenu',
  templateUrl: './sidemenu.component.html',
  styleUrls: ['./sidemenu.component.css'],
})
export class SidemenuComponent implements OnInit {
  showText = true;
  appitems: any[];
  config: any;
  constructor(private el: ElementRef) {}
  ngOnInit() {
    this.appitems = [
      {
        label: 'Dashboard',
        icon: 'dashboard',
        link: 'dashboard',
      },
      {
        label: 'Create Order',
        icon: 'shopping_cart',
        link: 'order',
      },
      {
        label: 'Search',
        icon: 'image_search',
        items: [
          {
            label: 'Order Search',
            icon: 'search',
            link: 'order-search',
          },
          {
            label: 'Job Search',
            icon: 'search',
            link: 'job-search',
          },         
        ],
      },

    ];
    this.config = {
      interfaceWithRoute: true,
      classname: 'side-menu-class',
      listBackgroundColor: `#12517c`,
      fontColor: `white`,
      backgroundColor: `#12517c`,
      selectedListFontColor: `red`,
    };
  }
  toggleText() {
    this.showText = !this.showText;
    const elements = this.el.nativeElement.querySelectorAll('.label');
    const htmlElements = Array.from(elements).map(x => x as HTMLElement);
    htmlElements.forEach(label => (label.hidden = !this.showText));
  }
}

Shanky · Accepted Answer · 2019-01-27T13:27:11.677

1

This below warnings are not related to your project, its plugin's issue. The plugin needs to be updated with its dependencies. I'll do it ASAP.

npm WARN ng-material-multilevel-menu@4.9.1 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 ng-material-multilevel-menu@4.9.1 requires a peer of @angular/core@^6.0.0-rc.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.

As far as the above error is concerned, the selectedItem() and selectedLabel() methods are not defined in the SideMenu Component class.

Thanks,

Edit 1:

You have to install Peer dependencies by yourself

edited Jan 27 '19 at 13:27

answered Jan 24 '19 at 07:48

Shanky

101
1
1
8

version warnings still there on 4.9.2 – Monish Sen Jan 26 '19 at 10:36
npm WARN ng-material-multilevel-menu@4.9.2 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 ng-material-multilevel-menu@4.9.2 requires a peer of @angular/core@^6.0.0-rc.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself. – Monish Sen Jan 26 '19 at 10:36
@Shanky - Could you please check my question https://stackoverflow.com/questions/60336154/cant-bind-to-configuration-since-it-isnt-a-known-property-of-ng-material-mu?noredirect=1#comment106731369_60336154 – R15 Feb 21 '20 at 14:15

ng-material-multilevel-menu not working in Angular 7

1 Answers1