Dynamic route params and name for side navigation

[bujardeari]

Is there a way to add dynamic names and url into _nav.ts ?

[btd1337]

Same Problem.

I need to add dynamic childs into sidebar but i can't.

[kane-armstrong]

Just replace _nav.ts with some sort of navigation service.

[xidedix]

hi,
as you probably noticed, in _nav.ts there is a plain simple js object
you can write a service that returns dynamically altered copy of this navigation object

[jrasonja]

Hi,
I tried to replace _nav.ts with a service and it is partially working. An error occurs when I try to change a value of the navigation property in AppSidebarNavComponent.

The navigation is correctly changing when the navigation property is an empty array and it is changed to the value from _nav.ts

In a basic setup, I copy file _nav.ts and make _nav2.ts with small modifications. When changing the property, the error occurs pointing at the line <ng-template ngFor let-navitem [ngForOf]="navigation"> in AppSidebarNavComponent.html

`ERROR

DOMException
code: 8
columnNumber: 0
data: null
filename: "webpack-internal:///../../../platform-browser/esm5/platform-browser.js"
lineNumber: 2842
message: "Node was not found"
name: "NotFoundError"
ngDebugContext: Object { view: {…}, nodeIndex: 6, nodeDef: {…}, … }
ngErrorLogger: function bound ()
result: 2152923144
stack: "DefaultDomRenderer2.prototype.removeChild@webpack-internal:///../../../platform-browser/esm5/platform-browser.js:2842:13\nDebugRenderer2.prototype.removeChild@webpack-internal:///../../../core/esm5/core.js:15468:9\nexecRenderNodeAction@webpack-internal:///../../../core/esm5/core.js:10464:13\nvisitRenderNode@webpack-internal:///../../../core/esm5/core.js:10432:13\nvisitSiblingRenderNodes@webpack-internal:///../../../core/esm5/core.js:10363:13\nvisitRootRenderNodes@webpack-internal:///../../../core/esm5/core.js:10347:5\nvisitRenderNode@webpack-internal:///../../../core/esm5/core.js:10437:17\nvisitSiblingRenderNodes@webpack-internal:///../../../core/esm5/core.js:10363:13\nvisitRootRenderNodes@webpack-internal:///../../../core/esm5/core.js:10347:5\nrenderDetachView@webpack-internal:///../../../core/esm5/core.js:11309:5\ndetachEmbeddedView@webpack-internal:///../../../core/esm5/core.js:11247:5\nViewContainerRef_.prototype.remove@webpack-internal:///../../../core/esm5/core.js:11702:41\nNgForOf.prototype._applyChanges/<@webpack-internal:///../../../common/esm5/common.js:2693:17\nDefaultIterableDiffer.prototype.forEachOperation@webpack-internal:///../../../core/esm5/core.js:7620:17\nNgForOf.prototype.applyChanges@webpack-internal:///../../../common/esm5/common.js:2686:9\nNgForOf.prototype.ngDoCheck@webpack-internal:///../../../common/esm5/common.js:2672:17\ncheckAndUpdateDirectiveInline@webpack-internal:///../../../core/esm5/core.js:12579:9\ncheckAndUpdateNodeInline@webpack-internal:///../../../core/esm5/core.js:14100:20\ncheckAndUpdateNode@webpack-internal:///../../../core/esm5/core.js:14043:16\ndebugCheckAndUpdateNode@webpack-internal:///../../../core/esm5/core.js:14936:55\ndebugCheckDirectivesFn@webpack-internal:///../../../core/esm5/core.js:14877:13\nView_AppSidebarNavComponent_0/<@ng:///AppModule/AppSidebarNavComponent.ngfactory.js:67:5\ndebugUpdateDirectives@webpack-internal:///../../../core/esm5/core.js:14862:12\ncheckAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14009:5\ncallViewAction@webpack-internal:///../../../core/esm5/core.js:14360:21\nexecComponentViewsAction@webpack-internal:///../../../core/esm5/core.js:14292:13\ncheckAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14015:5\ncallViewAction@webpack-internal:///../../../core/esm5/core.js:14360:21\nexecComponentViewsAction@webpack-internal:///../../../core/esm5/core.js:14292:13\ncheckAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14015:5\ncallViewAction@webpack-internal:///../../../core/esm5/core.js:14360:21\nexecComponentViewsAction@webpack-internal:///../../../core/esm5/core.js:14292:13\ncheckAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14015:5\ncallViewAction@webpack-internal:///../../../core/esm5/core.js:14360:21\nexecEmbeddedViewsAction@webpack-internal:///../../../core/esm5/core.js:14318:17\ncheckAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14010:5\ncallViewAction@webpack-internal:///../../../core/esm5/core.js:14360:21\nexecComponentViewsAction@webpack-internal:///../../../core/esm5/core.js:14292:13\ncheckAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14015:5\ncallWithDebugContext@webpack-internal:///../../../core/esm5/core.js:15263:39\ndebugCheckAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14800:12\nViewRef.prototype.detectChanges@webpack-internal:///../../../core/esm5/core.js:11784:13\nApplicationRef.prototype.tick/<@webpack-internal:///../../../core/esm5/core.js:6115:58\nApplicationRef.prototype.tick@webpack-internal:///../../../core/esm5/core.js:6115:13\nnext/<@webpack-internal:///../../../core/esm5/core.js:5948:99\nZoneDelegate.prototype.invoke@webpack-internal:///../../../../zone.js/dist/zone.js:388:17\nonInvoke@webpack-internal:///../../../core/esm5/core.js:4947:24\nZoneDelegate.prototype.invoke@webpack-internal:///../../../../zone.js/dist/zone.js:387:17\nZone.prototype.run@webpack-internal:///../../../../zone.js/dist/zone.js:138:24\nNgZone.prototype.run@webpack-internal:///../../../core/esm5/core.js:4764:54\nnext@webpack-internal:///../../../core/esm5/core.js:5948:69\nEventEmitter.prototype.subscribe/schedulerFn<@webpack-internal:///../../../core/esm5/core.js:4533:36\nSafeSubscriber.prototype.__tryOrUnsub@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:245:13\nSafeSubscriber.prototype.next@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:192:17\nSubscriber.prototype._next@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:133:9\nSubscriber.prototype.next@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:97:13\nSubject.prototype.next@webpack-internal:///../../../../rxjs/_esm5/Subject.js:65:17\nEventEmitter.prototype.emit@webpack-internal:///../../../core/esm5/core.js:4513:24\ncheckStable@webpack-internal:///../../../core/esm5/core.js:4912:13\nonLeave@webpack-internal:///../../../core/esm5/core.js:4991:5\nonInvokeTask@webpack-internal:///../../../core/esm5/core.js:4941:17\nZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:420:17\nZone.prototype.runTask@webpack-internal:///../../../../zone.js/dist/zone.js:188:28\nZoneTask.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:496:24\ninvokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:1517:9\nglobalZoneAwareCallback@webpack-internal:///../../../../zone.js/dist/zone.js:1543:17\n"
proto: DOMExceptionPrototype { name: Getter, message: Getter, INDEX_SIZE_ERR: 1, … }`

[bcherry007]

I am facing same issue

[xidedix]

@bcherry007 @ju-ra
please update @coreui/angular dependency to 2.4.1
and let us know if this helps

[amirensit]

Hello.

Any idea about this issue ?

Any solution please ?

[github-actions]

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