I have created a simple window component that has a header and shows some content. My app will only ever show one window at a time, so I placed it in the root of my app and only change its contents when needed.
As I need to be able to set the window content from various places in the app, I created a service that my component is bound to. This way I can call methods on the service from everywhere I need, and change properties of the window component.
What I don't know how to do with the service however, is to specify an instance of a component that is to be shown as the window content. Could I somehow e.g. programmatically set the ng-content for the window component?
My current workaround is having all possible contents specified in the window component, and selecting the correct one with *ngIf like this:
<contentA *ngIf="windowService.getContent()='a'"></contentA>
<contentB *ngIf="windowService.getContent()='b'"></contentB>
<contentC *ngIf="windowService.getContent()='c'"></contentC>
It works well enough, but the list is getting long and difficult to maintain. I also don't like having my window component coupled with all these other components that it really has nothing to do with. Furthermore each different content has its own input parameters and now the window-service and -component need to keep track of those as well...
So my question is; Is there a feature in angular that I don't know about that solves these kinds of problems, or should I approach it in another way?
Things that come to mind are placing a ng-content tag in the window component and somehow getting the service to replace that tag with what I need. Or should I place a router-outlet inside my window component? I don't like that approach either as changing the content shouldn't count as navigation. I already have an outlet for that which has nothing to do with this component.
Your current method is indeed inefficient and will be hard to scale.
You should look into Angular's Dynamic Components
Hope this helps.
UPDATE please note that in most cases routing will be what you need. Dynamic components are great for (as the name suggests) dynamic content, where you DO NOT want to change the application state (i.e url). The reason I referred you to Dynamic Components is because you mentioned you are already using the router and were looking for a different solution (although technically you could have nested routes and even popup routes).