How to dynamic change component template at runtime?. Angular 4

Question

I have a menu bar and action panel. A action panel is just simple div in which inside I want to display different components.

For example: User click button A -> display Component A in action panel; User click button B -> display Component B in action panel;

What is the best way to do this?

I thought to use ngswtich in my template, for example (pseudocode!).

<div id="action-panel">
    <div [ngSwitch]="componentType">         
        <div *ngSwitchCase="userComponent">
            <user-component></user-component>
        </div>
   </div>
</div>

you can use routing to this, you can navigate through different views. see more at https://angular.io/guide/router — Raed Khalaf, Jul 04 '17 at 14:03

score 1 · Accepted Answer · answered Jul 04 '17 at 14:01

Take a look at the routing and use sub routing for it. Place a new <router-outlet></router-outlet> inside or instead of your action-panel and do sub state component.

This is a really good read and might enlighten you: http://blog.angular-university.io/angular2-router/

Possible duplicate of Angular 2 - Submodule routing and nested <router-outlet>

How to dynamic change component template at runtime?. Angular 4

1 Answers1