Skip to content

router-outlet should not affect layout (option to render as non-box/anchor) #64553

@MillerSvt

Description

@MillerSvt

Which @angular/* package(s) are relevant/related to the feature request?

router

Description

is a marker element that does not contain the routed component’s DOM; the actual component root is rendered as a sibling after the outlet.
However, the outlet element itself still participates in layout (inline/box). This can interfere with CSS Grid/Flexbox flows, gaps, and alignment, forcing developers to add a global stylesheet rule like:

router-outlet { display: none; }

or similar hacks.

Related to: https://stackoverflow.com/questions/54868967/how-to-get-angulars-router-outlet-to-work-with-css-grid

Motivation

  • Avoid layout artifacts (extra empty grid/flex item, unexpected inline box).
  • Reduce boilerplate and “magic CSS” in every app and library.
  • Make router behavior consistent with other Angular structural anchors, which use comment anchors and do not create a layout box.

Proposed solution

(any of the following would solve the problem)

1. Opt-in comment anchor for outlets

Add a configuration/flag so that router-outlet uses a comment node anchor (like @if) instead of an element.
Possible shapes:

Router config:

provideRouter(routes, { outletAnchor: 'comment' /* | 'element' (default) */ });

Or attribute/boolean input on the outlet:

<router-outlet anchor="comment"></router-outlet>

Or provide control-flow directive:

@router-outlet;

@router-outlet (name: 'secondary');

@router-outlet { placeholder };

@router-outlet (name: 'secondary') { placeholder };

2. Documented & bundled style

Officially document and ship a built-in global style (or recommend it prominently in the Router docs) so apps don’t need to rediscover it:

router-outlet { display: none /* or display: contents */; }

Alternatives considered

Keep relying on app-level CSS (router-outlet { display:none }).
Works, but it’s non-obvious, duplicated across apps, and easy to miss (especially inside Shadow DOM).

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions