Nebular: Dynamic menu doesn't get refreshed in html on success(changeDetection: ChangeDetectionStrategy.OnPush).

[NikhilGangurde]

Issue type

Bug with changeDetection: ChangeDetectionStrategy.OnPush OR NbMenuComponent.html

I'm submitting a ...

• [X] bug report
• [ ] feature request

Issue description

I am using <nb-menu tag="menu" [items]="menuItems"></nb-menu> and my menu items are dynamic and i am calling api on ngOnInit But after i get response menu doesnt get updated and if i call this.cd.detectChanges() after success it throws

ERROR TypeError: "_v.context.$implicit is undefined"

and the menu works fine. That means my HTML doesn't update when the menu gets.

Current behavior:
As mention Above. and also if i remove this.cd.detectChanges() i have to open and close inspector window to view menu.

Expected behavior:
The menu should be refreshed on the success of the api call.

Related code:
_imports in app.component.ts:_

import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef, OnDestroy } from '@angular/core';
import { NbSidebarService, NbIconLibraries, NbToastrService } from '@nebular/theme';
import { WishserviceService } from '../app/wishservice.service';
import { takeWhile } from 'rxjs/operators';
import { from, pipe } from 'rxjs';

_ngOnInit:_

  ngOnInit() {
    this.loading = true;
    this.services.getMainMenu()
    .pipe(takeWhile(() => this.alive))
    .subscribe((res)=>{
      console.log(res.Status);
      if(res.Status == "success")
      {
        this.menu1 = res.data
        for (let i = 0; i < this.menu1.length; i++) {
          this.services.getSubMenu(this.menu1[i]['menuId']).subscribe((res)=>{
            this.menu2 = res.data
            let newchild = []
            for (let i = 0; i < this.menu2.length; i++) {
              newchild[i] = {
                title : this.menu2[i]['subMenuName'],
                link : []
                }
              }

            this.menuItems[i] = {
            "title":this.menu1[i]['mainMenuName'],
            "icon":this.menu1[i]['iconHtml'],
            "children":newchild
          }
          this.loading = false;
          this.cd.detectChanges() // Here i called detect changes if i remove this menu doesnt gets updated.
          }, (err)=>{
            console.log(JSON.stringify(err));
          });
        }
      }
      else {
        this.toastrService.show("status", "TOAST", "Top-right");
      }
    }, (err)=>{
      console.log(JSON.stringify(err));
    });

    console.log("---------------->",this.menuItems);

  }

Other information:

IF YOU NEED ANY COMMENT.

[GiaCatKhongVinh]

I'm getting same problem as thread owner. Was using customized pipe to access another outer component from Nebular Header but still unable to detect changes.

<div class="header-container"> <nb-actions size="small"> <nb-action icon="bell-outline" badgeText="{{(''|notification).totalUnviewedNotif}}" badgePosition="top right" (click)="naviNotif()" badgeStatus="danger"> </nb-actions> </div>

I've tried implementing AfterViewChecked but it's not working.
export class HeaderComponent implements OnInit, OnDestroy, AfterViewChecked { ngAfterViewChecked() { this.cdr.detectChanges(); } }

Please help to check. Thanks a lot!

[GiaCatKhongVinh]

I'm getting same problem as thread owner. Was using customized pipe to access another outer component from Nebular Header but still unable to detect changes.

`

badgeText="{{(''|notification).totalUnviewedNotif}}"
badgePosition="top right"
(click)="naviNotif()"
badgeStatus="danger">

`

I've tried implementing AfterViewChecked but it's not working.
export class HeaderComponent implements OnInit, OnDestroy, AfterViewChecked { ngAfterViewChecked() { this.cdr.detectChanges(); } }

Please help to check. Thanks a lot!

Had to bring all business logic to Nebular Header to workaround this. But side effect is Circular Dependency from within Nebular Theme Module which may cause unexpected errors.

[manolof]

I just wanted to add that even in the docs page, where the Live view of the NbMenuItem component is displayed, it only highlights the active menu item after hovering with the mouse.