3

At the end of my wits here, so reaching out to smarter people. I am building a custom "tabbed" CMS system. Problem is with tabs and components. I wish to show a specific component in newly generated tab, in other words, I wish to load components dynamically. To clarify:

Picture 1

In picture 1 we see our layout, we have left sidebar with links, Tab holder, where opened tabs are shown, and Content holder, where we show loaded tab contents.

Picture 2

In picture 2 we see our layout, when I have clicked on "Help" link in sidebar. A tab with its title is created in tab holder area, and its content loaded into content area.

What I need:

  1. Tab "Dashboard" is active by default and unclosable.
  2. When I click on "Help" link in sidebar, I wish to initialize HelpComponent loading. I want to create tab with title "Help" in tab holder area and in content area load that components template & data NEXT to dashboards template, NOT overriding it.
  3. I want to freely jump across tabs, basically show/hide happens on the content there. Tab and its content are removed from DOM only when i press x in tab.
  4. Url represents where u are, if I'm in dashboard: localhost/dashboard, if I'm in help: localhost/help.

What are the best options to make this a reality?

Can I somehow setup this system using router links or should I make a function in SidebarComponent, which reads the element I clicked, gets its attribute "data-href" and then somehow manually initialize component load / route change?

Some very basic plunkers showing this in action would be GODLY!

p.s. The things I researched mostly reffered to DynamicComponentLoader(DCL), but that is deprecated now and replaced by ElementRef and ViewContainerRef (http://blog.lacolaco.net/post/dynamic-component-creation-in-angular-2/), but I can't find an example appropriate enough to understand how to apply it to my situation.

This, however, was a little bit closer to what I needed - code there-> - http://plnkr.co/edit/MMy3azc4ksQOH6ezZIG5?p=preview. It loads component on demand and then simply reuses them (show/hide). But it seems that was built on the old router-deprecated module.

Starwave
  • 2,352
  • 2
  • 23
  • 30
  • Sounds like http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 – Günter Zöchbauer Jul 29 '16 at 13:10
  • How do I implement and call it? I need to call DclWrapper in app.component.ts, but what function then I use to call a specific component? – Starwave Jul 29 '16 at 13:17
  • The DclWrapper allows you do use dynamic components declaratively. No need to call anything. Just use a binding that passes the component type to DclWrappers `type` input. If you **want** to call something you can use the implementation of DclWrapper and copy it to your component. – Günter Zöchbauer Jul 29 '16 at 13:19
  • Got your example working. I defined `types = [DashboardComponent, HelpComponent];` in my AppComponent. But that loads both components on startup. I want to load only dashboard, and then load HelpComponent, when a link is clicked on sidebar. So I leave types as this: `types = [DashboardComponent];`, but when I do `this.types.push( HelpComponent );` on click, the tabs don't get updated, only DashboardComponent is visible, because it was in the array on startup. Checked with console.log, both components are in the array after click. How do I update the tabs, so the HelpComponent renders as well? – Starwave Aug 01 '16 at 07:47
  • Angular change detection doesn't check array content changes. Try `this.types.push(HelpComponent); this.types = this.types.slice();` – Günter Zöchbauer Aug 01 '16 at 07:50
  • Nice try :D Unfortunately that doesn't update it... – Starwave Aug 01 '16 at 07:52
  • Hard to tell. Can you provide a Plunker? – Günter Zöchbauer Aug 01 '16 at 07:53
  • Weird, it works in plunker, but doesn't work for me locally. Perhaps there is some dependency missing or something... http://plnkr.co/edit/KLT6r47U3Tw2lwnJKlbq?p=preview – Starwave Aug 01 '16 at 08:48
  • Hard to tell :-/ Do you get any error in the browser console? – Günter Zöchbauer Aug 01 '16 at 08:49
  • No I don't, and console logging out the array still shows that the component has been added. Removed routing from project to make it more plunker like, but still the same – Starwave Aug 01 '16 at 08:53
  • 1
    Oh well, if I figure it out, I'll let you know – Starwave Aug 01 '16 at 08:54
  • Ok, seems that the update is blocked by Router. Hierarchy: AppComponent->here in `` we show TabHolderComponent-> In it we show ``. If I call and add the HelpComponent to tabs, it is only visible when I goto TabHolderComponent path again, like after its refresh. Have to figure out how to force that router refresh... – Starwave Aug 01 '16 at 10:43
  • If you can reproduce it with the router in the Plunker I can have a look. – Günter Zöchbauer Aug 01 '16 at 10:46
  • Goddamnit this took a while... http://plnkr.co/edit/KLT6r47U3Tw2lwnJKlbq?p=preview There is some sort of conflict between `.on("click")`. One is in `design.js`, other is in `tab-holder.component.ts`. If you comment out the design.js code, then it works. – Starwave Aug 01 '16 at 13:59

0 Answers0