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.

Continue reading...