router-outlet should not affect layout (option to render as non-box/anchor)
- Dominant language
- TypeScript
- Stars
- 101k
- Forks
- 27.5k
- Avg merge
- 1d 19h
- Merged PRs (30d)
- 288
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:
```css
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:
```typescript
provideRouter(routes, { outletAnchor: 'comment' /* | 'element' (default) */ });
```
Or attribute/boolean input on the outlet:
```html
```
Or provide control-flow directive:
```html
@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:
```css
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).
Contributor guide
Research direction
Start with the router package and the router-outlet implementation described in the issue, then trace how the outlet is represented in the rendered DOM and how its configuration is defined. First resolve which proposed approach is wanted; done means the chosen opt-in anchor or documented style avoids the unwanted layout box without breaking routed components or named outlets.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100