SideNavBar classes and attributes are not updating dynamically

[aruscus]

I'm using

"@coreui/angular": "^2.9.0",
"@coreui/coreui": "^2.1.16",

After loading the default-layout.component and after some time, If I update the class or attributes values of the existing data then it is not reflecting in the side navbar.

Like say if I have the below code initially

export const navItems: INavData[] = [
{
    name: 'Sales',
    url: '/sales',
    icon: 'fa fa-tasks',
    children: [
      {
        name: 'Dashboard',
        url: '/sales/dashboard',
        icon: 'fa fa-tachometer'
      },
      {
        name: 'Report',
        url: '/sales/report',
        icon: 'fa fa-clock-o'
      }
} ];

After sometime, If I update the navItems file like this

export const navItems: INavData[] = [
{
    name: 'Sales',
    url: '/sales',
    icon: 'fa fa-tasks',
    children: [
      {
        name: 'Dashboard',
        attributes: {hidden: true},
        url: '/sales/dashboard',
        icon: 'fa fa-tachometer'
      },
      {
        name: 'Report',
        class: 'mt-3',
        url: '/sales/report',
        icon: 'fa fa-clock-o'
      }
} ];

Then it is not adding the attributes {hidden: true} to the Dashboard and class mt-3 to the Report. But, If I change the name from Dashboard to Dash then it is updating.

[xidedix]

@rangeranger
What about async pipe? When a new value is emitted, the async pipe marks the component to be checked for changes.

<app-sidebar-nav 
  [navItems]="navItems | async">
</app-sidebar-nav>

[aruscus]

@xidedix : Tried that. With or without async pipe, class and attribute values are not applying if they are changed after it is loaded.

[xidedix]

@rangeranger have you seen this: #161 (comment)
not exactly your case, but the same idea

[xidedix]

@rangeranger
One more thing, navItems is an array of objects (nested).
If you update any of its fields, you'll have to let Angular know it has changed.
A deep clone will do.

[aruscus]

@xidedix : Thanks a lot, Sir. You saved my day. Deep clone solved the problem. I didn't know a nested array of objects needed a deep clone to let Angular know it has changed. I thought arrays/array of objects doesn't need a deep clone.

Without a deep clone, the name is changing but just attributes and classes are not changing. Still wondering why the name is changing and not others without a deep clone.

Thanks again.

[aruscus]

@xidedix: Also, it will be very helpful if you can add a data property to INavData Interface to store roles/privileges (developer-defined data) as we have in Angular Route Interface (https://angular.io/api/router/Route#data).

[xidedix]

@rangeranger

• (...)why the name is changing and not others(...)? - a shallow copy doesn't clone nested object values, just references. In js, objects are a reference type (reference of these objects never changes).
• data property - could you explain a use case for sidebar-nav?

BTW you can pass any html data-* attributes like this:

  {
    name: 'Dashboard',
    url: '/dashboard',
    icon: 'icon-speedometer',
    attributes: {'data-role': 'admin' }
  },

or pass a state to NavigationExtras via linkProps:

  {
    name: 'Dashboard',
    url: '/dashboard',
    icon: 'icon-speedometer',
    linkProps: { state: { hello: 'world' }}
  },

[shakyamoksha]

@xidedix : Thanks a lot, Sir. You saved my day. Deep clone solved the problem. I didn't know a nested array of objects needed a deep clone to let Angular know it has changed. I thought arrays/array of objects doesn't need a deep clone.

Without a deep clone, the name is changing but just attributes and classes are not changing. Still wondering why the name is changing and not others without a deep clone.

Thanks again.

@rangeranger @xidedix

Hello, I am having the same issue where I'm trying to update the Badge for an Item in the Side Nav, could you post the solution you did through 'Deep Clone' please.