How to make a dynamic sidebar menu?

[dolgovnv]

I want to make a dynamic sidebar menu. For the test, I created a method changeMenu() in default-layout.component.ts.

I made the following changes (coreui-free-angular-admin-template-2.0.0-rc.4):

default-layout.component.html
<a class="nav-link" href="#" (click)="changeMenu()">Dashboard</a>

default-layout.component.ts
public changeMenu() { this.navItems = [ { name: 'Dashboard', url: '/dashboard', icon: 'icon-speedometer', badge: { variant: 'info', text: 'NEW' } } ]; }

I'm changing the array navItems. However, a strange bug occurs. A new item is added to the menu, and the old ones do not disappear.

Screenshot before clicking

after clicking

just try to fix it by create a custom sidebar-nav and replace app-sidebar-nav in default-layout

import {Component, HostBinding, Input} from '@angular/core';

@Component({
    selector: 'app-sidebar-nav-custom',
    templateUrl: './sidebar-nav-custom.component.html',
    styleUrls: ['./sidebar-nav-custom.component.scss']
})


export class SidebarNavCustomComponent {
    @Input() navItems: Array<any>;
    @HostBinding('class.sidebar-nav') true;
    @HostBinding('attr.role') role;

    constructor() {
    }

    isDivider(navItem) {
        return !!navItem.divider
    }

    isTitle(navItem) {
        return !!navItem.title
    }

    isHasChild(navItem) {
        return navItem.hasOwnProperty('children') && navItem.children.length > 0;
    }

}

<ul class="nav">
    <ng-template ngFor let-navitem [ngForOf]="navItems">
        <li *ngIf="!isHasChild(navitem)"
            [ngClass]="{'nav-title': isTitle(navitem), 'nav-item': !(isTitle(navitem) || isDivider(navitem)), 'nav-divider': isDivider(navitem)}"
        >
            <span *ngIf="isTitle(navitem)">{{navitem.name}}</span>
            <span *ngIf="isDivider(navitem)"></span>
            <a class="nav-link" *ngIf="!(isTitle(navitem) || isDivider(navitem))" routerLink="{{navitem.url}}"
               routerLinkActive="active">
                <i class="nav-icon" [ngClass]="navitem.icon"></i> {{navitem.name}}
            </a>
        </li>
        <li *ngIf="isHasChild(navitem)" appNavDropdown routerLinkActive="open" class="nav-item nav-dropdown open">
            <a appNavDropdownToggle class="nav-link nav-dropdown-toggle" role="button"><i class="nav-icon" [ngClass]="navitem.icon"></i> {{navitem.name}}</a>
            <ul class="nav-dropdown-items">
                <li class="nav-item" *ngFor="let cnavitem of navitem.children">
                    <a class="nav-link" *ngIf="!(isTitle(cnavitem) || isDivider(cnavitem))" routerLink="{{cnavitem.url}}"
                       routerLinkActive="active">
                        <i class="nav-icon" [ngClass]="cnavitem.icon"></i> {{cnavitem.name}}
                    </a>
                </li>
            </ul>
        </li>
    </ng-template>
</ul>

[dolgovnv]

Thank you. I did it in almost the same way.

[tsegato]

Just what I needed. However do you know how to call the custom component from another component? In my custom component I have following:

loadNew(){
alert('sadasdasdasd');
console.log('dd');

this.navItems = []; 

this.navItems.push(
  {
    name: 'Dashboard 2',
    url: '/dashboard',
    icon: 'icon-speedometer',
   
  }
);

}

When I call that from another component the method is called, but it is not reflected in the UI. If I call the method from within the customer component it works.

import { Component, OnInit } from '@angular/core';
import { SidebarNavCustomComponentComponent} from '../sidebar-nav-custom-component/sidebar-nav-custom-component.component';

@component({
selector: 'app-vessels',
templateUrl: './vessels.component.html',
styleUrls: ['./vessels.component.scss']
})
export class VesselsComponent implements OnInit {

constructor(private sidebar: SidebarNavCustomComponentComponent) { }

ngOnInit() {
}

loadMenu(){
alert('lol');
this.sidebar.loadNew();
}

}

@tsegato read this link to know how to format code block. You should write a service to communicate between components, I think you're doing wrong way

[prathikpaip]

Just change the following code under fesm5 with filename coreui-angular.js at the coreUI module
from ng-template to div

{
  selector: 'app-sidebar-nav',
  template: `
    <ul class="nav">
      <div *ngFor="let navitem of navItems">
        <li *ngIf="isDivider(navitem)" class="nav-divider"></li>
        <ng-template [ngIf]="isTitle(navitem)">
          <app-sidebar-nav-title [title]='navitem'></app-sidebar-nav-title>
        </ng-template>
        <ng-template [ngIf]="!isDivider(navitem)&&!isTitle(navitem)">
          <app-sidebar-nav-item [item]='navitem'></app-sidebar-nav-item>
        </ng-template>
      </div>
    </ul>`
}

and apply the same for coreui-angular.metadata.json

Worked for me!