Tenho dois elementos estáticos no projeto, que nunca vão sumir, somente o conteúdo, esses são o menu do topo e uma sidenav, apartir da rota quero inserir componentes dentro do <mat-sidenav-content></mat-sidenav-content>
conforme vou navegando, a principío é simples, mas é de outro componente, então seria inserir componentes dentro do template.
<!-- sidenav.component.html -->
<mat-sidenav-container>
<mat-sidenav mode="side" opened>
<a>teste</a>
</mat-sidenav>
<mat-sidenav-content>
<!-- componentes aqui -->
</mat-sidenav-content>
</mat-sidenav-container>
<!-- top-menu.component.html -->
<mat-toolbar color="primary">
<p>works</p>
</mat-toolbar>
<!-- index.component.html -->
<app-top-menu></app-top-menu>
<app-sidenav></app-sidenav>
<p>index component</p>
No app.component.html só tenho <router-outlet></router-outlet>
, então a ideia é que toda vez que um usuário acessar o app, caia no login e depois carregue essa sidenav e qualquer outro component dentro do mat-sidenav-content
Teoricamente eu faria isso em um component, adicionaria os templates e o conteúdo iria no local correto, porem, ele fica abaixo do sidenav:
Component index inserido abaixo do template:
Como deveria ser: