Angular Incorrect Margin-Left Applied To Sidenav Content

Question

I have an Angular project using Angular Material but I'm running into a bug where sometimes the mat-sidenav-content has a margin-left: 365px; applied to it that causes a large white space between the sidenav and the main content.

It happens about 50% of the time when I load the app, the margin-left is applied. The rest of the time it is fine. However, if I click the menu button to hide the menu and show it again, then it is fixed until I reload the app.

I feel like it might have something to do with my isMobile() function and race condition, but not sure.

In my app.component.html

<div class="app-container">
    <mat-toolbar color="primary">
        <mat-toolbar-row>
            ...
        </mat-toolbar-row>
    </mat-toolbar>
    <mat-sidenav-container class="mat-container" >
        <mat-sidenav #sidenav class="mat-sidenav" [opened]="!isMobile()" [mode]="isMobile() ? 'over': 'side'" style="background: rgb(30, 136, 229);">
            <mat-nav-list class="mat-nav-list" role="list" style="padding-top: 0px;border-top-width: thin;border-top: white;border-top-style: solid;">
                ...
            </mat-nav-list>
        </mat-sidenav>

        <!--The magin-left is being applied here-->
        <mat-sidenav-content>
            <router-outlet></router-outlet>
        </mat-sidenav-content>

    </mat-sidenav-container>

    <mat-toolbar style="padding: 0px;background: #e9ecef;">
        <mat-toolbar-row>
            ...
        </mat-toolbar-row>
    </mat-toolbar>
</div>

In my app.component.ts

export class AppComponent implements OnInit {

    private mediaMatcher: MediaQueryList = matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`);

    @ViewChild('sidenav') public sidenav: MatSidenav;

    constructor(zone: NgZone) {
        this.mediaMatcher.addListener(mql => zone.run(() => this.mediaMatcher = mql));
    }

    public ngOnInit(): void {
        this.sidenav.open();
    }

    isMobile(): boolean{
        return this.mediaMatcher.matches;
    }
}

Edit: Inside ngAfterViewInit() I get the this.sidenav._width, sometimes it is 365 and sometimes it is 167.

I may have narrowed down my problem a little bit. Inside my mat-nav-list I have a

<sidenav-group [icon]="'local_atm'" [label]="'Deposits'" [currentRoute]="currentRoute"
                            (changeRouteOutput)="changeRoute($event, false)">
</sidenav-group>

It only happens when I have this component.

<a class="mat-list-item" mat-list-item="" role="listitem" (click)="toggleBody()"  style="color: white;">
    <div class="mat-list-item-content" style="display: flex; flex: 1; padding-left: 0px;">
        <div class="mat-list-item-ripple mat-ripple"></div>
        <div class="mat-list-text"></div>
        <mat-icon mat-list-icon>{{icon}}</mat-icon>
        {{label}}
        <span class="example-spacer"></span>
        <i class="material-icons" *ngIf="!displayBody">keyboard_arrow_down</i>
        <i class="material-icons" *ngIf="displayBody">keyboard_arrow_up</i>
    </div>
</a>

<div *ngIf="displayBody">
    <!-- Search -->
    <sidenav-element [icon]="'search'" [label]="'Search'" [route] ="'deposit/search'" [currentRoute]="currentRoute"
                    (changeRouteOutput)="changeRoute($event)">
    </sidenav-element>

    <!-- Cheque -->
    <sidenav-element [label]="'Cheque'" [route] ="'deposit/cheque'" [currentRoute]="currentRoute"
                    (changeRouteOutput)="changeRoute($event)">
    </sidenav-element>

    <!-- Pre-Authorization -->
    <sidenav-element  [label]="'Pre-Authorization'" [route] ="'deposit/pre-auth'" [currentRoute]="currentRoute"
        (changeRouteOutput)="changeRoute($event, false)">
    </sidenav-element>
</div>

I can add as many sidenav-element and it still works fine, only when I have sidenav-group

Answer 1

use autosize

<mat-sidenav-container autosize>
<mat-sidenav-container>