angular / angular/angular

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

Open
#64,553 2 comments 3 reactions 0 assignees View on GitHub
area: router
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.