Render multiple router-outlets in Angular 2 app.component

Question

I have my angular component:

@Component({
  selector: 'test-app',
  template: `
        <div *ngIf="isEmptyLayout">
            <router-outlet></router-outlet>
        </div>

        <div *ngIf="!isEmptyLayout">
            <h1>Not empty template</h1>
            <router-outlet></router-outlet>
        </div>
  `
})
export class AppComponent { ...

What I want to do is create separated layout for landing page and admin area. However, this renders an error. What are your suggestions to render router-outlet few times depending on current url?

score 0 · Answer 1 · edited May 23 '17 at 12:25

0

You can try this Multiple layout in angular 2.

Hope it helps. Been using it for a while now and it scales very well no matter the number of layout your would want to use in your app

edited May 23 '17 at 12:25

Community

1
1

answered Dec 01 '16 at 18:52

oseintow

7,221
3
26
31

score 0 · Answer 2 · answered Dec 01 '16 at 18:54

0

Why do you want to use multiple router outlets? You could structure your template like this:

<div>
    <h1 *ngIf="!isEmptyLayout">Not empty template</h1>
    <router-outlet></router-outlet>
</div>

answered Dec 01 '16 at 18:54

Tudor Ciotlos

1,805
4
29
47

Render multiple router-outlets in Angular 2 app.component

2 Answers2