Angular material - Comportement inattendu lors du découpage du code en composant

Question

J'ai une page angulaire simple avec un nav latéral droit de matériel angulaire. Lorsque j'écris tout le code sur l'app-component, tout fonctionne comme prévu, la barre de navigation s'ouvre en dehors de la barre d'outils et de la page principale comme prévu.
voir Démonstration conforme aux attentes
Mais lorsque j'ai essayé de diviser l'app-Root en composants, la barre de navigation latérale flotte sur la barre d'outils, contrairement à ce que devrait faire le mode="side" de la barre de navigation.
voir La démo ne correspond pas aux attentes

J'ai essayé de jouer avec CSS / ajouter fxFlex mais le comportement reste le même

Qu'est-ce qui m'échappe ?

Answer 1

Lorsque vous utilisez plus de composants, cela signifie que plus de div envelopper votre code...

Ce div "supplémentaire" dérange le comportement noraml de mat-sidenav

L'astuce consiste donc à n'exclure que <mat-sidenav> au composant principal (dans votre cas sidenav-autosize-example ) et le contenu placé dans le nouveau composant (dans votre cas <app-main-menu></app-main-menu> )

Utiliser également [:host](https://developer.mozilla.org/en-US/docs/Web/CSS/:host()) en sidenav-autosize-example css pour styliser le contenu du composant enfant.

Voir le code de fonctionnement

<mat-sidenav-container class="example-container" fullscreen autosize>
  <app-toolbar></app-toolbar>
  <mat-sidenav #sidenav class="example-sidenav" mode="side" position="end" opened="true">
    <app-main-menu></app-main-menu>
  </mat-sidenav>
</mat-sidenav-container>

Answer 2

Je pense que c'est lié à la hiérarchie des éléments Angular Material.

Lorsque vous créez un composant, Angular place une autre balise HTML entre le composant parent et le composant enfant, avec le nom du composant enfant. En modifiant le code comme ci-dessous, le Side Nav fonctionne.

Comme l'élément Side Nav influence l'orientation de l'élément parent, je pense qu'il doit être placé juste après un élément <mat-sidenav-container > élément.

<mat-sidenav-container class="example-container" fullscreen autosize>
 <app-toolbar></app-toolbar>
  <mat-sidenav #sidenav class="example-sidenav" mode="side" position="end" opened="true">
    <app-main-menu></app-main-menu>
  </mat-sidenav>
</mat-sidenav-container>