Search code examples
htmlangularrouter-outlet

Is it possible to define a default wrapper for content in <router-outlet>?

My app.component.html looks pretty clean at the moment:

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

It renders something similar to this:

<body>
    <app-header>
        <header></header>
    </app-header>
    <router-outlet>
        [rendered content]
    </router-outlet>
    <app-footer>
        <footer></footer>
    </app-footer>
</body>

Now I want a <main>-element to be wrapped around all [rendered content], like:

<router-outlet>
    <main>
        [rendered content]
    </main>
</router-outlet>

Is this possible?

At the moment I'm wrapping <router-outlet> in <main>. But it doesn't feel so clean:*

<app-header></app-header>
<main>
    <router-outlet></router-outlet>
</main>
<app-footer></app-footer>

… as it renders to:

<main _ngcontent-c0="">
    <router-outlet _ngcontent-c0=""></router-outlet>
</main>

* I know this is very subjective.

Solution

  • Is this possible?

    Not possible.

    Any component that gets injected to the template using a router-outlet will get injected as a sibling of the < router-outlet > and not as its child.

    As a result, the following will never become true:

    <router-outlet>
    <main>
        [rendered content]
    </main>
</router-outlet>

    Please see how the routed component is a sibling as in the example below:

    enter image description here