Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SideNavBar classes and attributes are not updating dynamically #180

Closed
rangeranger opened this issue Mar 10, 2020 · 8 comments
Closed

SideNavBar classes and attributes are not updating dynamically #180

rangeranger opened this issue Mar 10, 2020 · 8 comments

Comments

@rangeranger
Copy link

rangeranger commented Mar 10, 2020

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
Copy link
Member

xidedix commented Mar 10, 2020

@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>

@rangeranger
Copy link
Author

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

@xidedix
Copy link
Member

xidedix commented Mar 11, 2020

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

@xidedix
Copy link
Member

xidedix commented Mar 11, 2020

@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.

@rangeranger
Copy link
Author

@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
Copy link
Author

@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
Copy link
Member

xidedix commented Mar 11, 2020

@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
Copy link

shakyamoksha commented Oct 18, 2022

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants