0

In my app.component.html I have a structural markup for navigation and a main area where I intend to render in different things from other components.

<navbar (onPopup)="popup.show($event);">NavBar</navbar>
<sidebar>SideBar</sidebar>
<popup #popup>Popup</popup>
<mainarea>MainArea</mainarea>

The idea is to create a bunch of components that target the same selector (i.e. mainarea) but show entirely different templates. So, I'd have something like this.

// ./demo1/demo-x.ts
import { Component } from "@angular/core";
@Component({ selector: "mainarea", template: require("./demo-x.html") })
export class DemoX { constructor() { console.log("Demo X"); } }

But also (note that the selector targets the same tag on the page) something like this.

// ./demo2/demo-y.ts
import { Component } from "@angular/core";
@Component({ selector: "mainarea", template: require("./demo-y.html") })
export class DemoY { constructor() { console.log("Demo Y"); } }

In the menu system, the idea is to receive a click from the user and, depending on what they clicked, load in the correct page into the holder tag mainarea.

At the moment, it's fails, because Angular doesn't like the two different components to be rendered in the same selector. I see the problem and I suspect that I might have started off based on a flawed idea to begin with.

I sense that routing might be a good idea but straight off, I can't see how to incorporate it into the menu system. Only the portion of the site that's contained in mainarea control is supposed to be updated while the rest shouldn't change (and definitely not be reloaded).

Konrad Viltersten
  • 36,151
  • 76
  • 250
  • 438
  • I don't think this approach will work. Perhaps something like shown in http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 might work for your use case as well. – Günter Zöchbauer Mar 20 '17 at 15:44
  • @GünterZöchbauer Feel free to criticize, by all means. I'm at a stage where changes to the base are still possible to quite some extent. How would you suggest to approach it? (The example linked isn't really spot-on, regrettably, and I fear that RC isn't sufficiently relevant to the final Angular version. Bad experience from before in this regard.) – Konrad Viltersten Mar 20 '17 at 15:57
  • AFAIK there hasn't changed much since RC.6. This version was were the last big changes happened (introduction of NgModule, ...). You can just pass the components type to the wrapper element and it will add it to the DOM (similar as the router does). If you want to decide at runtime what components to add, you have only - a list of `*ngIf`s or `switchCase`, or loading components dynamically like shown in the linked answer. – Günter Zöchbauer Mar 20 '17 at 16:06
  • @GünterZöchbauer as you mention in the post, router maybe the solution. You can check out `router.navigate` and also http://stackoverflow.com/questions/38120756/angular2-router-navigate-refresh-page – John Siu Mar 20 '17 at 16:41
  • Sure, the router would work as well. The main difference is that the URL-bar reflects the status change, while the approach in the answer I linked to does not. If that's fine with you or even desired, using the router definitely is the better approach. – Günter Zöchbauer Mar 20 '17 at 16:43

0 Answers0