0

I am trying to create a sidebar dynamically. Which can be collapsed or expanded by clicking the menu item. Using

<div [innerHtml]="function()"></div>

works. But the submenus are collapsed as it should be. But it does not expand when you click on it. Getting errors.

When I tried to use dynamic components <ng-template sideBarPage></ng-template>, it is collapsed, but I get the following error. Don't know if it is expecting a router map.

injector.ts:1 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'subMenu1'
Error: Cannot match any routes. URL Segment: 'subMenu1'

Also I tried with encapsulation: ViewEncapsulation.Native. When Native mode is used all the submenus are expanded and clicks do not work.

I have created a sample here https://embed.plnkr.co/mn8gKcBzJLD4StrN5SmP/

The "Sidebar Item 2" should be collapsed and on click expand.

I am new to Angular. Any help is appreciated. Thanks

Shriram M.
  • 383
  • 1
  • 7
  • Don't bind functions in the view. It will be called every time change detection runs. Your question doesn't provide any information about your router setup even though the error message is from the router. – Günter Zöchbauer Oct 30 '17 at 05:20
  • when I click on sidebar item 2 the URL is /#subMenu1 – PTN Oct 30 '17 at 05:21
  • The plunker contains way too much code. https://stackoverflow.com/help/mcve – Günter Zöchbauer Oct 30 '17 at 05:23
  • Sorry about the way too much code. I have shrunk it to the minimal now.

    Yes, when you click on the sidebar item2 the link shows correctly. But it doesn't expand. Which, I am not able to show on plunkr. But when I run directly from WebStorm and open it in Google Chrome, neither it shows the downward-caret, nor when you click on it, it opens (expands) the submenu.     – Shriram M. Oct 30 '17 at 06:03
  • Wonder if it has to do with JQuery that bootstrap uses for navbars. If the html is static, it works, but when the html text is dynamically included the submenu doesn't expand or contract (though the link is correct). – Shriram M. Oct 30 '17 at 06:13

1 Answers1

0

The problem is resolved, after introducing a pipe on the innerHtml text. Here is the link that helped.

Was able to figure out from looking at the element in Chrome browser and found that the attribute "id" was missing. After sanitizing the html, I am able to see and click on the down-caret and expand the sidebar.

Shriram M.
  • 383
  • 1
  • 7