My <app-root> layout is pretty straightforward:
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'UI';
}
app.component.html:
<app-navbar></app-navbar>
<router-outlet></router-outlet>
app.component.css
:host {
display: grid;
grid-template-rows: 63px 1fr;
grid-template-columns: 1fr;
height: 100vh;
width: 100vw;
grid-template-areas:
"navbar"
"main"
}
app-navbar {
grid-area: navbar;
}
routing-outlet {
grid-area: main;
}
The problem I'm encountering is that the HTML template loaded by the routing module is being treated as a third template on the page. This means that the <routing-module> tag is taking up the entire 1fr, instead of the intended template. The target template then loads as a third row, wrapping at the bottom border of the viewport.
I have found a workaround, but it feels like a hack:
grid-template-rows: 63px 0 1fr;
Is there a more standard or better approach to solving this issue?