Router outlet sibling styling

I've come back to Angular after a long time and am a bit confused. Last time I used angular any routes defined where being rendered as children of router outlet. But now it is being rendered as child of router outlet. Is this normal behavior?

This is causing issues with styling for me a little. Previously the router outlet would be styled to fit the screen but now each individual component needs to have a class attached to it in the TS file.

Is there a better way to do it? I would like to use % of the parent component to fit parent components dimensions. Adding a container div in the html of the component still poses the issue that it does not scale the <app-..> wrapper and hence the div is sized to that. I am using angular 20. Below is my current code.

app.html

<div class="container">
  <app-navigation 
    class="nav"></app-navigation>
  <div 
    [@content-animate] = "isContentExpanded() ? 'expanded' : 'collapsed'"
    class="content">
    <router-outlet></router-outlet>
  </div>
</div>

app.routes.ts

import { Routes } from '@angular/router';
import { Login } from './features/login/login';

const routes: Routes = [
  {
    path: '',
    component: Login,
  },
];

export {routes}

app.config.ts

import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

import { routes } from './app.routes';
import { provideStore } from '@ngrx/store';
import { themeReducer } from './core/stores/theme/theme.reducer';
import { profileReducer } from './core/stores/profile/profile.reducer';

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideAnimationsAsync(),
    provideZonelessChangeDetection(),
    provideRouter(routes),
    provideStore({
      theme: themeReducer,
      profile: profileReducer
    })
  ]
};

login.html

<h1 class="title">LOGIN</h1>

Any help is appreciated.

The component is rendered as the adjacent element to the router-outlet.

The Angular components by default have zero height. You should use the below methods to achieve this.

In your scss file, set display:block;height:100% to get the full height.

:host {
  display:block;
  height:100%;
}

Create the component with --display-block.

ng g c <<component name>> --display-block

You need to add the height:100% though to take the full height.

Configure on the schematics that always to create a component with display:block.

{
"projects": {
      ...
},
"schematics": {
    "@schematics/angular:component": {
        "prefix": "app",
        "style": "scss",
        "displayBlock": true,
        ...
    },
    ...