-
Notifications
You must be signed in to change notification settings - Fork 26.7k
Description
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).