कोणीय सामग्री - घटक में कोड विभाजित करते समय अप्रत्याशित व्यवहार

जब आप अधिक घटक का उपयोग करते हैं, तो इसका मतलब है कि अधिक div अपना कोड रैप करें...

यह "अतिरिक्त" div mat-sidenav के सामान्य व्यवहार को परेशान करता है

तो चाल केवल <mat-sidenav> को मुख्य घटक (आपके मामले में sidenav-autosize-example) और नए घटक में डाली गई सामग्री (आपके मामले में <app-main-menu></app-main-menu>) को बाहर करना है।

साथ ही {a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:host()" rel="nofollow noreferrer">:host का इस्तेमाल sidenav-autosize-example css चाइल्ड कंपोनेंट की सामग्री को स्टाइल करने के लिए।

कार्य कोड देखें

<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>