Comments (14)
For those whom may concern, it may be an ugly fix
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app';
navItems = [
{
title: true,
name: 'Transactions',
class: 'nav-transactions-title'
},
{
name: 'List',
url: 'users/list'
}
];
ngOnInit(): void {
let cnt = 0;
setInterval(() => {
cnt++;
this.navItems[0].name = '' + cnt;
this.navItems[1].name = '' + cnt;
document.getElementsByClassName('nav-transactions-title').item(0).innerHTML = this.navItems[0].name;
}, 1000);
}
}
Directly update the content by dom method.
from coreui-angular.
Hi @blissi
navItems array is located here:
https://github.com/coreui/coreui-free-angular-admin-template/blob/master/src/app/_nav.ts
if you need some more customization, you can create a wrapper around it
from coreui-angular.
Hi!
I am experiencing the same problem. I managed to solve the i18n of items by adding a key property to the _nav.ts, on which the name property will be filled when changing languages. However, as others said, the titles remain the same - that's because these items got created once on init in AppSidebarNavTitleComponent. An OnChanges-type check and reloading / re-rendering would be nice!
from coreui-angular.
Hi. I'm experiencing this same issue with duplicate menu items. What's the best way to resolve?
from coreui-angular.
@xidedix oh sorry, I didn't explain it well enough what I am trying to do...I have a language toggle in my application that allows the user to update the current language on-the-fly. That works fine for the rest of my app, but I couldn't get the navigation to work properly. I tried the two approaches that I described in my first post.
from coreui-angular.
@blissi I have the same problem trying to update the navigation menu dynamically. My use case is that my menu items come from the server. So based on the content I am viewing, the menu may be different.
Been watching for update on this since you posted this. By any chance, have you found a work around for this?
from coreui-angular.
@blissi Spent sometime on the codes. Found what may be wrong. The host replacement routine Replace
is messing this up for the app-sidebar-nav-item
component or so. It works as expected on my project now. Thought I should share it with you. I'd do a pull request so you could check it.
from coreui-angular.
@burntblark Thanks that you shared your changes with me. It doesn't work, though: when the user switches the language, the regular navigation items change their text, but the title items don't do (as a side note: I implemented language switch with my second approach - that is, the navigation items in _nav.ts are patched, no new navigation structure created).
from coreui-angular.
Hi everyone! I'm trying to update the navigation menu dynamically but it doesn't work. Menu data comes from server. Everytime that the application received the new menu data, the component adds the new menu after the old. How can I fix this? Thanks!
-- core ui versions:
"@coreui/angular": "^2.0.0-rc.1",
"@coreui/coreui": "^2.0.2",
from coreui-angular.
+1
from coreui-angular.
What I did for the duplicate issue was create my own components locally. See https://gist.github.com/Azuka/b4837da81614826e655c60dcdbf3d40b. I haven't seen any issues so far. It seems to have something to do with multiple elements in a template with ngFor
.
from coreui-angular.
Hallo,
how can I localize the navigation of the AppSidebarNav? I tried two approaches, but both failed:
- Create a new navigation-array. Through the data binding, this should fully replace all existing navigation items in the UI - but that's not the case: the new items are added to the existing items.
- Update the "name"-property of the existing navigation items in the array. This works for regular navigation items, but not for titles: the titles keep their previous text.
For the titles,
Here's a simple reproduction.
src/app/app.component.html
<app-sidebar-nav [navItems]="navItems"></app-sidebar-nav>
src/app/app.component.ts
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app';
navItems = [
{
title: true,
name: 'Transactions'
},
{
name: 'List',
url: 'users/list',
// icon: 'icon-list'
}
];
ngOnInit(): void {
let cnt = 0;
setInterval(() => {
cnt++;
this.navItems[0].name = '' + cnt;
this.navItems[1].name = '' + cnt;
}, 1000);
}
}
src/app/app.module.ts
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {AppSidebarModule} from '../../projects/coreui/angular/src/lib/sidebar';
import {RouterModule} from '@angular/router';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppSidebarModule,
RouterModule.forRoot([])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
The title one won't get incremented.
It's likely because of the AppSidebarNavTitleComponent using a simple property assignment instead of an angular template without property change detection.
const name = this.renderer.createText(this.title.name);
from coreui-angular.
I have the same problem.
Only solved with DOM manipulation
in *.component.html
... <a>... (click)="transalteTo('ru') ...>Русский</a> <a>... (click)="transalteTo('de') ...>Deutsh</a> <a>... (click)="transalteTo('en') ...>English</a>
in *.component.ts
`
translateTo(language:string):void {
console.log('switch to: ' + language);
...translateService.use(language)...
// as an example, we change only the first menu item
var menu:Element = document.getElementsByTagName('app-sidebar-nav-link').item(0);
const menuTextOriginalHTML = menu.innerHTML;
console.log(menuTextOriginalHTML); // see original HTML
// set new i18n value
menu.innerHTML = `<!--bindings={
"ng-reflect-ng-switch-case": "disabled"
}--> ### HERE i18n VALUE ### `;
...
}
`
For a change, all menu items use foreach(){...}
from coreui-angular.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions
from coreui-angular.
Related Issues (20)
- Smart Table not updating the data. HOT 6
- Showing record count in smart table HOT 4
- Side Menu when clicked open to new tab HOT 1
- SidebarModule: Clicking on backdrop does not close sidebar on mobile view HOT 3
- Dynamic Nav json format for sidebar HOT 1
- Build Issue - version 15 in Github Action HOT 2
- Using of Accordion throws NullInjector error HOT 6
- Multi Select with fewer data HOT 4
- Hide manually check box for selectable enabled HOT 3
- Datepicker inside a modal that is in another modal. Datepicker not showing HOT 2
- Angular v17 support HOT 4
- Upgrade to angular 17 HOT 1
- [Blocker] IntersectionObserver is not definded HOT 1
- toaster doesn't fire visibleChange HOT 5
- RTL alignment issue in drop-down menu HOT 1
- Use of different Icons aside from Core UI Icons HOT 4
- During control flow migration a typo error was introduced on iconComponent check
- How to overwrite size property? HOT 3
- issue after updating from angular 14 to 15 HOT 3
- cIcon directive change name binding not refresh icon in angular 17 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from coreui-angular.