angularjs - Show templates from different components on same place -

i trying rewrite administration of application angular2. have 3 components (appcomponent, systemcomponent , shopcomponent).

appcomponent:

import {component} 'angular2/core'; import {routeconfig, router, router_directives} 'angular2/router'; import {systemcomponent} "./system.component";  @component({    selector: 'app',    templateurl: '/templates/layout',    directives: [router_directives] })  @routeconfig([    {        path: '/',        redirectto: ['/system'],        useasdefault: true    },    {        path: '/-1/...',        name: 'system',        component: systemcomponent    } ]) export class appcomponent {    constructor(router: router){        router.navigate(['/system']);    } } 

systemcomponent:

import {component} 'angular2/core'; import {routeconfig, routeroutlet} 'angular2/router';  @component({    directives: [routeroutlet] }) export class systemcomponent {} 

shopcomponent:

import {component} 'angular2/core'; import {routeconfig, routeroutlet} 'angular2/router';  @component({    directives: [routeroutlet] }) export class shopcomponent {} 

i need modify systemcomponent , shopcomponent, load different template in 2 different places different design , content (in detail in fig.)

you can't dynamically change templateurl of component. 1 component == 1 html page.

what can use control flow, example *ngif or *ngswitch load different portion of template based on criteria.