is there any way to display recursive menu in side navigation menu in angular?

Question

here i'm setting up for dynamic menu from database having recursive structure. menu appears in other pages but raised an error in side navbar, there is any way to implement?

i have created one custom components and its working fine in all pages but not working into side navigation bar. when i put custom components into side navigation bar, then its raised an error like this.

compiler.js:2430 Uncaught Error: Template parse errors:
Can't bind to 'ngClass' since it isn't a known property of 'i'. ("ngFor="let parentNode of DynamicMenuList">
    <a *ngIf="parentNode.Path == ''" href="">
      <i [ERROR ->][ngClass]="parentNode.icon"></i><span> {{ parentNode.text }}</span>
      <i *ngIf="parentNode.subme"): ng:///MenuViewModule/TreeView.html@28:9
Can't bind to 'ngIf' since it isn't a known property of 'i'. ("'" href="">
      <i [ngClass]="parentNode.icon"></i><span> {{ parentNode.text }}</span>
      <i [ERROR ->]*ngIf="parentNode.submenu != null" class="fa fa-angle-left"></i>
    </a>

here is menu-view.module.ts that return the custom components to layout module

import { NgModule } from '@angular/core';
import { MenuViewComponent } from './menu-view.component';
import { TreeView } from './tree-view.directory';

@NgModule({
  declarations: [
    MenuViewComponent,
    TreeView,
  ],
  exports: [
    MenuViewComponent,
    TreeView,
  ]
})
export class MenuViewModule { }

here is my layout.module.ts

import { NgModule } from '@angular/core';
.......
.......
import { MenuViewModule } from '../menu-view/menu-view.module';
import { LayoutSidenavComponent } from './layout-sidenav/layout-sidenav.component';

@NgModule({
  imports: [
    ......
    ......
    NgbModule,
    SidenavModule,
    MenuViewModule
  ],
  declarations: [
    ......
    LayoutNavbarComponent,
    LayoutSidenavComponent,
    LayoutFooterComponent
  ],
  providers: [
    LayoutService
  ]
})
export class LayoutModule { }

here is my custom components code

<ul class="sidebar-menu">
  <li class="treeview" *ngFor="let parentNode of DynamicMenuList">
    <a *ngIf="parentNode.Path == ''" href="">
      <i [ngClass]="parentNode.icon"></i><span> {{ parentNode.text }}</span>
      <i *ngIf="parentNode.submenu != null" class="fa fa-angle-left"></i>
    </a>
    <a *ngIf="parentNode.Path != ''" [routerLink]="[parentNode.Path]">
      <i [ngClass]="parentNode.icon"></i><span> {{ parentNode.text }}</span>
      <i *ngIf="parentNode.submenu != null" class="fa fa-angle-left"></i>
    </a>
    <ul class="treeview-menu">
      <li *ngFor="let childNode of parentNode.submenu">
        <a [routerLinkActive]="['active']">
          <i [ngClass]="childNode.icon"></i><span>{{childNode.text}}</span>
          <i *ngIf="childNode.submenu != null" class="fa fa-angle-left"></i>
        </a>
        <div *ngIf="childNode.submenu.length > 0" class="treeview-menu">
          <tree-view [DynamicMenuList]="childNode.submenu"></tree-view>
        </div>
      </li>
    </ul>
  </li>
</ul>

i actually need menuview into side navigation but its not return, when i put it into other page just

then its provide me perfect output like this.

here is my output : https://i.sstatic.net/S5guc.jpg

The error you're getting makes me think you didn't include the Angular CommonModule in a module of you own. Maybe the layout module. — R. Richards
– R. Richards, Commented Jul 26, 2019 at 11:21
@R.Richards in layout module i have already added CommonModule but not added into MenuViewModule, after adding CommonModule there is another issues like this. Uncaught Error: Template parse errors: 'tree-view-menu' is not a known element: 1. If 'tree-view-menu' is an Angular component, then verify that it is part of this module. — pravin vala
– pravin vala, Commented Jul 26, 2019 at 12:20
That error makes me think you didn't import the module that contains that component. Or, that component isn't properly declared in a module. — R. Richards
– R. Richards, Commented Jul 26, 2019 at 12:27

Navruzbek Noraliev · Accepted Answer · 2019-07-26 11:36:56Z

1

add CommonModule in both of your modules

@NgModule({ imports: [ ...... CommonModule NgbModule, SidenavModule, MenuViewModule ],

answered Jul 26, 2019 at 11:36

Navruzbek Noraliev

7146 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

pravin vala Over a year ago

i have already added into layout module but not into menuView module after adding into menu view module, its raised another issues.

Uncaught Error: Template parse errors: 'tree-view-menu' is not a known element: 1. If 'tree-view-menu' is an Angular component, then verify that it is part of this module.

Navruzbek Noraliev Over a year ago

is tree-menu-view a selector of component? then import it as well into your module. if you already imported, then there can an error with your selector. because the every selector and components are looked up from modules if it is not found they raise this error. It is better to add components with global selectors in the root module

pravin vala Over a year ago

there is one tree-view-directory.ts that having tree-view selector and property DynamicMenuList that is used in another file named as menu-view.components.ts here it is

import { Component, OnInit } from '@angular/core'; import { MenusService } from './../shared/service/menus.service';  @Component({   selector: 'tree-view-menu',   template: '<tree-view [DynamicMenuList]="DynamicMenuList"></tree-view>', }) export class MenuViewComponent {   DynamicMenuList: any;    constructor(...) { }    ngOnInit() {     ....   } }

pravin vala Over a year ago

thanks for your help. here i am done with take direct componets html value into sidenav.components.ts

Collectives™ on Stack Overflow

is there any way to display recursive menu in side navigation menu in angular?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related